docs(changelog): add changelog for 4.0.0-beta.7

chore(release): cut the 4.0.0-beta.7 release
build(integration): fix tests (#14371 )
2017-02-09 09:41:18 -08:00 · 2017-02-09 09:36:10 -08:00 · 2017-02-09 09:08:16 -08:00 · 2017-02-09 09:06:19 -08:00 · 2017-02-08 18:05:21 -06:00 · 2017-02-08 14:42:22 -06:00
2996 changed files with 187564 additions and 137169 deletions
--- 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
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -1,16 +1,39 @@
-**IMPORTANT**: This repository's issues are reserved for feature requests and bug reports. Do not submit support requests here, see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question. 
+<!--
 IF YOU DON'T FILL OUT THE FOLLOWING INFORMATION WE MIGHT CLOSE YOUR ISSUE WITHOUT INVESTIGATING
 -->
-
+**I'm submitting a ...**  (check one with "x")
-**Steps to reproduce and a minimal demo of the problem**
+```
-
+[ ] bug report => search github for a similar issue or PR before submitting
-_Use https://plnkr.co or similar -- try this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5_
+[ ] feature request
-
+[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
-_What steps should we try in your demo to see the problem?_
+```
 **Current behavior**
 <!-- Describe how the bug manifests. -->
 **Expected behavior**
 <!-- Describe what the behavior would be without the bug. -->
-**Expected/desired behavior**
+**Minimal reproduction of the problem with instructions**
 <!--
 If the current behavior is a bug or you can illustrate your feature request better with an example, 
 please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
 https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
 -->
 **What is the motivation / use case for changing the behavior?**
 <!-- Describe the motivation or the concrete use case -->
-**Other information**
+**Please tell us about your environment:**
 <!-- Operating system, IDE, package manager, HTTP server, ... -->
 * **Angular version:** 2.0.X
 <!-- Check whether this is still an issue in the most recent Angular version -->
 * **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
 <!-- All browsers where this could be reproduced -->
 * **Language:** [all | TypeScript X.X | ES6/7 | ES5]
 * **Node (for AoT issues):** `node --version` =   
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -1,24 +1,36 @@
-* **Please check if the PR fulfills these requirements**
+**Please check if the PR fulfills these requirements**
- [ ] The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit-message-format
+- [ ] The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
 - [ ] Tests for the changes have been added (for bug fixes / features)
 - [ ] Docs have been added / updated (for bug fixes / features)
-* **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
+**What kind of change does this PR introduce?** (check one with "x")
 ```
 [ ] Bugfix
 [ ] Feature
 [ ] Code style update (formatting, local variables)
 [ ] Refactoring (no functional changes, no api changes)
 [ ] Build related changes
 [ ] CI related changes
 [ ] Other... Please describe:
 ```
 **What is the current behavior?** (You can also link to an open issue here)
-* **What is the current behavior?** (You can also link to an open issue here)
+**What is the new behavior?**
-* **What is the new behavior (if this is a feature change)?**
+**Does this PR introduce a breaking change?** (check one with "x")
 ```
 [ ] Yes
 [ ] No
 ```
 If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
-
+**Other information**:
 * **Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?)
 * **Other information**:
--- a/.gitignore
+++ b/.gitignore
@ -1,35 +1,9 @@
 .DS_STORE
 # Don’t commit the following directories created by pub.
 packages
 pubspec.lock
 .pub
 .packages
 /dist/
 .buildlog
 node_modules
 bower_components
-
+angular.io/dist
 # Or broccoli working directory
 tmp
 # Or the files created by dart2js.
 *.dart.js
 *.dart.precompiled.js
 *.js_
 *.js.deps
 *.js.map
 # Files created by the template compiler
 **/*.ngfactory.ts
 **/*.css.ts
 **/*.css.shim.ts
 # Or type definitions we mirror from github
 # (NB: these lines are removed in publish-build-artifacts.sh)
 **/typings/**/*.d.ts
 **/typings/tsd.cached.json
 # Include when developing application packages.
 pubspec.lock
@ -47,13 +21,12 @@ modules/.vscode
 # Ignore npm debug log
 npm-debug.log
 /docs/bower_components/
 # build-analytics
 .build-analytics
 # built dart payload tests
 /modules_dart/payload/**/build
 # rollup-test output
 /modules/rollup-test/dist/
 # angular.io
 /angular.io/node_modules/
 /angular.io/dist/
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-5.4.1
+6.9.5
--- a/.pullapprove.yml
+++ b/.pullapprove.yml
@ -0,0 +1,244 @@
 # 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
 # chuckjaz - Chuck Jazdzewski
 # gkalpak - George Kalpakas
 # IgorMinar - Igor Minar
 # kara - Kara Erickson
 # matsko - Matias Niemelä
 # mhevery - Misko Hevery
 # petebacondarwin - Pete Bacon Darwin
 # pkozlowski-opensource - Pawel Kozlowski
 # robwormald - Rob Wormald
 # tbosch - Tobias Bosch
 # vicb - Victor Berchet
 # vikerman - Vikram Subramanian
 version: 2
 group_defaults:
  required: 1
  reset_on_reopened:
    enabled: true
  approve_by_comment:
    enabled: false
 groups:
  root:
    conditions:
      files:
        include:
          - "*"
        exclude:
          - "angular.io/*"
          - "integration/*"
          - "modules/*"
          - "tools/*"
    users:
      - IgorMinar
      - mhevery
  public-api:
    conditions:
      files:
        include:
          - "tools/public_api_guard/*"
    users:
      - IgorMinar
      - mhevery
  build-and-ci:
    conditions:
      files:
        include:
          - "*.yml"
          - "*.json"
          - "*.lock"
          - "tools/*"
        exclude:
          - "tools/@angular/tsc-wrapped/*"
          - "tools/public_api_guard/*"
    users:
      - IgorMinar #primary
      - mhevery
  integration:
    conditions:
      files:
        - "integration/*"
    users:
      - alexeagle
      - mhevery
      - tbosch
      - vicb
      - IgorMinar #fallback
  core:
    conditions:
      files:
        - "modules/@angular/core/*"
    users:
      - tbosch #primary
      - mhevery
      - vicb
      - IgorMinar #fallback
  compiler/animations:
    conditions:
      files:
        - "modules/@angular/compiler/src/animation/*"
    users:
      - matsko #primary
      - tbosch
      - IgorMinar #fallback
      - mhevery #fallback
  compiler/i18n:
    conditions:
      files:
        - "modules/@angular/compiler/src/i18n/*"
    users:
      - vicb #primary
      - tbosch
      - IgorMinar #fallback
      - mhevery #fallback
  compiler:
    conditions:
      files:
        - "modules/@angular/compiler/*"
    users:
      - tbosch #primary
      - mhevery
      - IgorMinar #fallback
  compiler-cli:
    conditions:
      files:
        - "tools/@angular/tsc-wrapped/*"
        - "modules/@angular/compiler-cli/*"
    users:
      - alexeagle
      - chuckjaz
      - tbosch
      - IgorMinar #fallback
      - mhevery #fallback
  common:
    conditions:
      files:
        - "modules/@angular/common/*"
    users:
      - pkozlowski-opensource #primary
      - vicb
      - IgorMinar #fallback
      - mhevery #fallback
  forms:
    conditions:
      files:
        - "modules/@angular/forms/*"
    users:
      - kara #primary
      # needs secondary
      - IgorMinar #fallback
      - mhevery #fallback
  http:
    conditions:
      files:
        - "modules/@angular/http/*"
    users:
      - vikerman #primary
      - alxhub
      - IgorMinar #fallback
      - mhevery #fallback
  language-service:
    conditions:
      files:
        - "modules/@angular/language-service/*"
    users:
      - chuckjaz #primary
      # needs secondary
      - IgorMinar #fallback
      - mhevery #fallback
  router:
    conditions:
      files:
        - "modules/@angular/router/*"
    users:
      - vicb #primary
      # needs secondary
      - IgorMinar #fallback
      - mhevery #fallback
  upgrade:
    conditions:
      files:
        - "modules/@angular/upgrade/*"
    users:
      - petebacondarwin #primary
      - gkalpak
      - IgorMinar #fallback
      - mhevery #fallback
  platform-browser:
    conditions:
      files:
        - "modules/@angular/platform-browser/*"
    users:
      - tbosch #primary
      - vicb
      - IgorMinar #fallback
      - mhevery #fallback
  platform-server:
    conditions:
      files:
        - "modules/@angular/platform-server/*"
    users:
      - vikerman #primary
      - alxhub
      - IgorMinar #fallback
      - mhevery #fallback
  platform-webworker:
    conditions:
      files:
        - "modules/@angular/platform-webworker/*"
    users:
      - vicb #primary
      # needs secondary
      - IgorMinar #fallback
      - mhevery #fallback
  benchpress:
    conditions:
      files:
        - "modules/@angular/benchpress/*"
    users:
      - tbosch #primary
      # needs secondary
      - IgorMinar #fallback
      - mhevery #fallback
  angular.io:
    conditions:
      files:
        - "angular.io/*"
    users:
      - IgorMinar
      - robwormald
      - petebacondarwin
      - mhevery #fallback
--- a/.travis.yml
+++ b/.travis.yml
@ -1,7 +1,11 @@
 language: node_js
 sudo: false
 node_js:
-  - '5.4.1'
+  - '6.9.5'
 git:
  # Increased from default (50) to ensure last release tag is in this range
  depth: 150
 addons:
 #  firefox: "38.0"
@ -17,176 +21,46 @@ branches:
    - g3_v2_0
 cache:
  yarn: true
  directories:
     - ./node_modules
     - ./.chrome/chromium
-#    - $HOME/.pub-cache
+     - ./angular.io/node_modules
 #before_cache:
 #  # Undo the pollution of the typescript_next build before the cache is primed for future use
 #  - if [[ "$MODE" == "typescript_next" ]]; then npm install typescript; fi
 env:
  global:
-#    - KARMA_JS_BROWSERS=ChromeNoSandbox
+    # GITHUB_TOKEN_ANGULAR
-#    - E2E_BROWSERS=ChromeOnTravis
+    # This is needed for the e2e Travis matrix task to publish packages to github for continuous packages delivery.
-#    - LOGS_DIR=/tmp/angular-build/logs
+    - secure: "fq/U7VDMWO8O8SnAQkdbkoSe2X92PVqg4d044HmRYVmcf6YbO48+xeGJ8yOk0pCBwl3ISO4Q2ot0x546kxfiYBuHkZetlngZxZCtQiFT9kyId8ZKcYdXaIW9OVdw3Gh3tQyUwDucfkVhqcs52D6NZjyE2aWZ4/d1V4kWRO/LMgo="
-#    - ARCH=linux-x64
+    # FIREBASE_TOKEN
-
+    # This is needed for publishing builds to the "aio-staging" firebase site.
    # TODO(i): the token was generated using the iminar@google account, we should switch to a shared/role-base account.
    - secure: "MPx3UM77o5IlhT75PKHL0FXoB5tSXDc3vnCXCd1sRy4XUTZ9vjcV6nNuyqEf+SOw659bGbC1FI4mACGx1Q+z7MQDR85b1mcA9uSgHDkh+IR82CnCVdaX9d1RXafdJIArahxfmorbiiPPLyPIKggo7ituRm+2c+iraoCkE/pXxYg="
  matrix:
    # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
    - CI_MODE=e2e EXPERIMENTAL_ES2015_DISTRO=1
    - CI_MODE=js
   - CI_MODE=lint
   - CI_MODE=e2e
    - CI_MODE=saucelabs_required
    - CI_MODE=browserstack_required
    - CI_MODE=saucelabs_optional
    - CI_MODE=browserstack_optional
    - CI_MODE=docs_test
    - CI_MODE=aio
-#matrix:
+matrix:
-#  allow_failures:
+  fast_finish: true
-#    - env: "MODE=saucelabs_optional"
+  allow_failures:
-#    - env: "MODE=browserstack_optional"
+    - env: "CI_MODE=saucelabs_optional"
-
+    - env: "CI_MODE=browserstack_optional"
 install:
  - ./scripts/ci-lite/install.sh
 before_script:
 script:
  - ./scripts/ci-lite/build.sh && ./scripts/ci-lite/test.sh
 after_success:
  - ./scripts/ci-lite/deploy_aio_staging.sh
 after_script:
  - ./scripts/ci-lite/cleanup.sh
 #branches:
 #  except:
 #    - g3_v2_0
 #
 #cache:
 #  directories:
 #    - $HOME/.pub-cache
 #    - $HOME/.chrome/chromium
 #
 #before_cache:
 #  # Undo the pollution of the typescript_next build before the cache is primed for future use
 #  - if [[ "$MODE" == "typescript_next" ]]; then npm install typescript; fi
 #
 #env:
 #  global:
 #    # Use newer verison 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
 #    - CXX=g++-4.8
 #    - KARMA_DART_BROWSERS=DartiumWithWebPlatform
 #    # No sandbox mode is needed for Chromium in Travis, it crashes otherwise: https://sites.google.com/a/chromium.org/chromedriver/help/chrome-doesn-t-start
 #    - KARMA_JS_BROWSERS=ChromeNoSandbox
 #    - E2E_BROWSERS=ChromeOnTravis
 #    - LOGS_DIR=/tmp/angular-build/logs
 #    - SAUCE_USERNAME=angular-ci
 #    - SAUCE_ACCESS_KEY=9b988f434ff8-fbca-8aa4-4ae3-35442987
 #    - BROWSER_STACK_USERNAME=angularteam1
 #    - BROWSER_STACK_ACCESS_KEY=BWCd4SynLzdDcv8xtzsB
 #    - ARCH=linux-x64
 #    - DART_DEV_VERSION=latest
 #    - DART_STABLE_VERSION=latest
 #    - DART_CHANNEL=stable
 #    - DART_VERSION=$DART_STABLE_VERSION
 #    # 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
 #    - secure: "fq/U7VDMWO8O8SnAQkdbkoSe2X92PVqg4d044HmRYVmcf6YbO48+xeGJ8yOk0pCBwl3ISO4Q2ot0x546kxfiYBuHkZetlngZxZCtQiFT9kyId8ZKcYdXaIW9OVdw3Gh3tQyUwDucfkVhqcs52D6NZjyE2aWZ4/d1V4kWRO/LMgo="
 #  matrix:
 #    # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
 #    - MODE=dart
 #    - MODE=dart DART_CHANNEL=dev
 #    - MODE=saucelabs_required
 #    - MODE=browserstack_required
 #    - MODE=saucelabs_optional
 #    - MODE=browserstack_optional
 #    - MODE=dart_ddc
 #    - MODE=js
 #    - MODE=router
 #    - MODE=build_only
 #    - MODE=typescript_next
 #    - MODE=lint
 #
 #matrix:
 #  allow_failures:
 #    - env: "MODE=saucelabs_optional"
 #    - env: "MODE=browserstack_optional"
 #
 #addons:
 #  firefox: "38.0"
 #  apt:
 #    sources:
 #      - ubuntu-toolchain-r-test
 #    packages:
 #      - g++-4.8
 #
 #before_install:
 #  - node tools/analytics/build-analytics start ci job
 #  - node tools/analytics/build-analytics start ci before_install
 #  - echo ${TSDRC} > .tsdrc
 #  - export CHROME_BIN=$HOME/.chrome/chromium/chrome-linux/chrome
 #  - export DISPLAY=:99.0
 #  - export GIT_SHA=$(git rev-parse HEAD)
 #  - ./scripts/ci/init_android.sh
 #  - sh -e /etc/init.d/xvfb start
 #  # Use a separate SauseLabs account for upstream/master builds in order for Sauce to create a badge representing the status of just upstream/master
 #  - '[ "${TRAVIS_PULL_REQUEST}" = "false" ] && [ "${TRAVIS_BRANCH}" = "master" ] && SAUCE_USERNAME="angular2-ci" && SAUCE_ACCESS_KEY="693ebc16208a-0b5b-1614-8d66-a2662f4e" || true'
 #  - node tools/analytics/build-analytics success ci before_install
 #
 #install:
 #  - node tools/analytics/build-analytics start ci install
 #  # Install version of npm that we are locked against
 #  - npm install -g npm@3.5.3
 #  # Install version of Chromium that we are locked against
 #  - ./scripts/ci/install_chromium.sh
 #  # Install version of Dart based on the matrix build variables
 #  - ./scripts/ci/install_dart.sh ${DART_CHANNEL} ${DART_VERSION} ${ARCH}
 #  # Print the size of caches to ease debugging
 #  - du -sh ./node_modules || true
 #  # Install npm dependecies
 #  # check-node-modules will exit(1) if we don't need to install
 #  # we need to manually kick off the postinstall script if check-node-modules exit(0)s
 #  - node tools/npm/check-node-modules --purge && npm install || npm run postinstall
 #  - node tools/analytics/build-analytics success ci install
 #
 #before_script:
 #  - node tools/analytics/build-analytics start ci before_script
 #  - mkdir -p $LOGS_DIR
 #  - ./scripts/ci/presubmit-queue-setup.sh
 #  - node tools/analytics/build-analytics success ci before_script
 #
 #script:
 #  - node tools/analytics/build-analytics start ci script
 #  - ./scripts/ci/build_and_test.sh ${MODE}
 #  - node tools/analytics/build-analytics success ci script
 #
 #after_script:
 #  - node tools/analytics/build-analytics start ci after_script
 #  - ./scripts/ci/print-logs.sh
 #  - ./scripts/ci/after-script.sh
 #  - ./scripts/publish/publish-build-artifacts.sh
 #  - node tools/analytics/build-analytics success ci after_script
 #  - tools/analytics/build-analytics $TRAVIS_TEST_RESULT ci job
 #
 #notifications:
 #  webhooks:
 #    urls:
 #      - https://webhooks.gitter.im/e/1ef62e23078036f9cee4
 #      # trigger Buildtime Trend Service to parse Travis CI log
 #      - https://buildtimetrend.herokuapp.com/travis
 #      - http://104.197.9.155:8484/hubot/travis/activity
 #    on_success: always  # options: [always|never|change] default: always
 #    on_failure: always  # options: [always|never|change] default: always
 #    on_start: never     # default: never
 #  slack:
 #    secure: EP4MzZ8JMyNQJ4S3cd5LEPWSMjC7ZRdzt3veelDiOeorJ6GwZfCDHncR+4BahDzQAuqyE/yNpZqaLbwRWloDi15qIUsm09vgl/1IyNky1Sqc6lEknhzIXpWSalo4/T9ZP8w870EoDvM/UO+LCV99R3wS8Nm9o99eLoWVb2HIUu0=
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/COMMITTER.md
+++ b/COMMITTER.md
@ -1,4 +1,4 @@
-# Pushing changes into the Angular 2 tree
+# 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.
@ -6,29 +6,16 @@ for details about how we maintain a linear commit history, and the rules for com
 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.
-## The `PR: merge` label and `presubmit-*` branches
+# Change approvals
-We have automated the process for merging pull requests into master. Our goal is to minimize the disruption for
+Change approvals in our monorepo are managed via [pullapprove.com](https://about.pullapprove.com/) and are configured via the `.pullapprove.yaml` file.
 Angular committers and also prevent breakages on master.
 When a PR has `pr_state: LGTM` and is ready to merge, you should add the `pr_action: merge` label.
 Currently (late 2015), we need to ensure that each PR will cleanly merge into the Google-internal version control,
 so the caretaker reviews the changes manually.
-After this review, the caretaker adds `zomg_admin: do_merge` which is restricted to admins only. 
+# Merging
 A robot running as [mary-poppins](https://github.com/mary-poppins)
 is notified that the label was added by an authorized person,
 and will create a new branch in the angular project, using the convention `presubmit-{username}-pr-{number}`.
-(Note: if the automation fails, committers can instead push the commits to a branch following this naming scheme.)
+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" label.
 This signals to the caretaker that the PR should be merged.
-When a Travis build succeeds for a presubmit branch named following the convention,
+# Who is the Caretaker?
 Travis will re-base the commits, merge to master, and close the PR automatically.
-Finally, after merge `mary-poppins` removes the presubmit branch.
+See [this explanation](https://twitter.com/IgorMinar/status/799365744806854656).
 ## Administration
 The list of users who can trigger a merge by adding the `zomg_admin: do_merge` label is stored in our appengine app datastore.
 Edit the contents of the [CoreTeamMember Table](
 https://console.developers.google.com/project/angular2-automation/datastore/query?queryType=KindQuery&namespace=&kind=CoreTeamMember)
--- 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]
+Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [StackOverflow](https://stackoverflow.com/questions/tagged/angular) where the questions should be tagged with tag `angular`.
 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].
-## <a name="issue"></a> Found an Issue?
+StackOverflow is a much better place to ask questions since:
-If you find a bug in the source code or a mistake in the documentation, you can help us by
+
 - there are thousands of people willing to help on StackOverflow
 - questions and answers stay available for public viewing so your question / answer might help someone else
 - StackOverflow's voting system assures that the best answers are prominently visible.
 To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
 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?
+## <a name="feature"></a> Missing a Feature?
-You can *request* a new feature by [submitting an issue](#submit-issue) to our [GitHub
+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
+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. Angular 2 is in developer preview
+a proposal for your work first, to be sure that we can use it.
 and we are not ready to accept major contributions ahead of the full release.
 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,24 +48,22 @@ 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.
+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.
 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
+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 wealth of important information without going back & forth to you with additional questions like:
 * **Angular Version** - what version of Angular is affected (e.g. 2.0.0-alpha.53)
 * **Motivation for or Use Case** - explain what are you trying to do and why the current behavior 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)
-You can file new issues by providing the above information [here](https://github.com/angular/angular/issues/new).
+- 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 don'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)
@ -95,7 +101,7 @@ Before you submit your Pull Request (PR) consider the following guidelines:
 * 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
@ -166,27 +172,63 @@ 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.
 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 change log 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:
 * **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 or correcting existing tests
 * **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)
-* **chore**: Other changes that don't modify `src` or `test` files
+* **docs**: Documentation only changes
 * **feat**: A new feature
 * **fix**: A bug fix
 * **perf**: A code change that improves performance
 * **refactor**: A code change that neither fixes a bug nor adds a feature
 * **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
  semi-colons, etc)
 * **test**: Adding missing tests or correcting existing tests
 ### Scope
-The scope could be anything specifying place of the commit change. For example
+The scope should be the name of the npm package affected (as perceived by person reading changelog generated from commit messages.
-`Compiler`, `ElementInjector`, etc.
+
 The following is the list of supported scopes:
 * **common**
 * **compiler**
 * **compiler-cli**
 * **core**
 * **forms**
 * **http**
 * **language-service**
 * **platform-browser**
 * **platform-browser-dynamic**
 * **platform-server**
 * **platform-webworker**
 * **platform-webworker-dynamic**
 * **router**
 * **upgrade**
 * **tsc-wrapped**
 There is currently few exception 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
 * **aio**: used for angular.io changes within the /angular.io 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`)
 ### Subject
 The subject contains succinct description of the change:
@ -225,8 +267,8 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
 [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
+[js-style-guide]: https://google.github.io/styleguide/jsguide.html
-[jsfiddle]: http://jsfiddle.net/
+[jsfiddle]: http://jsfiddle.net
 [plunker]: http://plnkr.co/edit
-[runnable]: http://runnable.com/
+[runnable]: http://runnable.com
 [stackoverflow]: http://stackoverflow.com/questions/tagged/angular
--- a/DEVELOPER.md
+++ b/DEVELOPER.md
@ -1,19 +1,13 @@
-# Building and Testing Angular 2 for JS and Dart
+# Building and Testing Angular
-This document describes how to set up your development environment to build and test Angular, both
+This document describes how to set up your development environment to build and test Angular.
-JS and Dart versions. It also explains the basic mechanics of using `git`, `node`, and `npm`.
+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](#installing-npm-modules)
-* [Installing NPM Modules and Dart Packages](#installing-npm-modules-and-dart-packages)
+* [Building](#building)
 * [Build commands](#build-commands)
 * [Running Tests Locally](#running-tests-locally)
 * [Code Style](#code-style)
 * [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.
@ -32,17 +26,8 @@ following products on your development machine:
  (version `>=3.5.3 <4.0`), which comes with Node. Depending on your system, you can install Node either from
  source or as a pre-packaged bundle.
-* *Optional*: [Dart](https://www.dartlang.org) (version ` >=1.13.2 <2.0.0`), specifically the Dart-SDK and
+* [Java Development Kit](http://www.oracle.com/technetwork/es/java/javase/downloads/index.html) which is used
-  Dartium (a version of [Chromium](http://www.chromium.org) with native support for Dart through
+  to execute the selenium standalone server for e2e testing.
  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). In that case, on Windows, Dart must be added
  to the `Path` (e.g. `path-to-dart-sdk-folder\bin`) and a new `DARTIUM_BIN` environment variable must be
  created, pointing to the executable (e.g. `path-to-dartium-folder\chrome.exe).`
 ## Getting the Sources
@ -65,44 +50,9 @@ 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
-## Environment Variable Setup
+Next, install the JavaScript modules needed to build and test Angular:
 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"
 ```
 And specify where the pub’s dependencies are downloaded. By default, this directory is located under .pub_cache
 in your home directory (on Mac and Linux), or in AppData\Roaming\Pub\Cache (on Windows).
 ```shell
 # PUB_CACHE: location of pub dependencies
 export PUB_CACHE="/Users/<user>/.pub-cache"
 ```
 ## 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)
@ -121,242 +71,120 @@ particular `gulp` and `protractor` commands. If you prefer, you can drop this pa
 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
+*Option 2*: globally installing the package `npm-run` by running `npm install -g npm-run`
 (you might need to prefix this command with `sudo`). You will then be able to run locally installed
 package scripts by invoking: e.g., `npm-run gulp build`
 (see [npm-run project page](https://github.com/timoxley/npm-run) for more details).
 *Option 3*: defining a bash alias like `alias nbin='PATH=$(npm bin):$PATH'` as detailed in this
 [Stackoverflow answer](http://stackoverflow.com/questions/9679932/how-to-use-package-installed-locally-in-node-modules/15157360#15157360) and used like this: e.g., `nbin gulp build`.
-## Build commands
+## Installing Bower Modules
-To build Angular and prepare tests, run:
+Now run `bower` to install additional dependencies:
 ```shell
-$(npm bin)/gulp build
+# Install other Angular project dependencies (bower.json)
 bower install
 ```
-Notes:
+## Windows only
 * 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:
+In order to create the right symlinks, run **as administrator**:
 ```shell
 ./scripts/windows/create-symlinks.sh
 ```
-* `$(npm bin)/gulp build.js`
+Before submitting a PR, do not forget to remove them:
-* `$(npm bin)/gulp build.dart`
+```shell
 ./scripts/windows/remove-symlinks.sh
 ```
-To clean out the `dist` folder, run:
+## Building
 To build Angular run:
 ```shell
-$(npm bin)/gulp clean
+./build.sh
 ```
 * Results are put in the dist folder.
 ## Running Tests Locally
-### Full test suite
+To run tests:
-* `npm test`: full test suite for both JS and Dart versions of Angular. These are the same tests
+```shell
-  that run on Travis.
+$ ./test.sh node             # Run all angular tests on node
-You can selectively run either the JS or Dart versions as follows:
+$ ./test.sh browser          # Run all angular tests in browser
 $ ./test.sh browserNoRouter  # Optionally run all angular tests without router in browser
-* `$(npm bin)/gulp test.all.js`
+$ ./test.sh tools            # Run angular tooling (not framework) tests
 * `$(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.
 **Note**: **watch mode** needs symlinks to work, so if you're using windows, ensure you have the
 rights to built them in your operating system.
 ### Unit tests with Sauce Labs or Browser Stack
 First, in a terminal, create a tunnel with [Sauce Connect](https://docs.saucelabs.com/reference/sauce-connect/) or [Browser Stack Local](https://www.browserstack.com/local-testing#command-line), and valid credentials.  
 Then, in another terminal:
 - Define the credentials as environment variables, e.g.:
 ```
 export SAUCE_USERNAME='my_user'; export SAUCE_ACCESS_KEY='my_key';
 export BROWSER_STACK_USERNAME='my_user'; export BROWSER_STACK_ACCESS_KEY='my_key';
 ```
 - Then run `gulp test.unit.js.(sauce|browserstack) --browsers=option1,option2,..,optionN`  
 The options are any mix of browsers and aliases which are defined in the [browser-providers.conf.js](https://github.com/angular/angular/blob/master/browser-providers.conf.js) file.  
 They are case insensitive, and the `SL_` or `BS_` prefix must not be added for browsers.
 Some examples of commands:
 ```
 gulp test.unit.js.sauce --browsers=Safari8,ie11  //run in Sauce Labs with Safari 8 and IE11
 gulp test.unit.js.browserstack --browsers=Safari,IE  //run in Browser Stack with Safari 7, Safari 8, Safari 9, IE 9, IE 10 and IE 11
 gulp test.unit.js.sauce --browsers=IOS,safari8,android5.1  //run in Sauce Labs with iOS 7, iOS 8, iOs 9, Safari 8 and Android 5.1
 ```
-### E2E tests
+You should execute the 3 test suites before submitting a PR to github.
-1. `$(npm bin)/gulp build.js.cjs` (builds benchpress and tests into `dist/js/cjs` folder).
+All the tests are executed on our Continuous Integration infrastructure and a PR could only be merged once the tests pass.
 2. `$(npm bin)/gulp serve.js.prod serve.dart` (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:
+- CircleCI fails if your code is not formatted properly,
-  - `$(npm bin)/protractor protractor-{js|dart2js}-conf.js --ng-help`
+- Travis CI fails if any of the test suites described above fails.
-### Performance tests
+## Update the public API tests
-1. `$(npm bin)/gulp build.js.cjs` (builds benchpress and tests into `dist/js/cjs` folder)
+If you happen to modify the public API of Angular, API golden files must be updated using:
 2. `$(npm bin)/gulp serve.js.prod serve.dart` (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, ...):
+``` shell
-`$(npm bin)/protractor protractor-{js|dart2js}-conf.js --ng-help`
+$ gulp public-api:update
 ## Code Style
 ### 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.
 * Use `$(npm bin)/clang-format -i [file name]` to format a file (or multiple).
 * 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.
+Note: The command `gulp public-api:enforce` fails when the API doesn't match the golden files. Make sure to rebuild
-  1. Under Preferences, open Tools > External Tools.
+the project before trying to verify after an API change.
  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: `$ProjectFileDir$/node_modules/.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.).
-### Linting
+## <a name="clang-format"></a> Formatting your source code
-We use [tslint](https://github.com/palantir/tslint) for linting. See linting rules in [gulpfile](gulpfile.js). To lint, run
+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
 ```
 ## Linting/verifying your source code
 You can check that your code is properly formatted and adheres to coding style by running:
 ``` shell
 $ gulp lint
 ```
-## Generating the API documentation
+## Publishing snapshot builds
-The following gulp task will generate the API docs in the `dist/angular.io/partials/api/angular2`:  
+When the `master` branch successfully builds on Travis, 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.
 The ES2015 version of Angular is published to a different branch in these repos, for example
 http://github.com/angular/core-builds#master-es2015
 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
-$(npm bin)/gulp docs/angular.io
+$ export TOKEN=[get one from https://github.com/settings/tokens]
 $ CREATE_REPOS=1 ./scripts/publish/publish-build-artifacts.sh [github username]
 ```
-You can serve the generated documentation to check how it would render on [angular.io](https://angular.io/):
+For subsequent snapshots, just run
 - check out the [angular.io repo](https://github.com/angular/angular.io) locally,
 - install dependencies as described in the [angular.io README](https://github.com/angular/angular.io/blob/master/README.md),
 - copy the generated documentation from your local angular repo at `angular/dist/angular.io/partials/api/angular2` to your local angular.io repo at `angular.io/public/docs/js/latest/api`,
 - run `harp compile` at the root of the angular.io repo to check the generated documentation for errors,
 - run `harp server` and open a browser at `http://localhost:9000/docs/js/latest/api/` to check the rendered documentation.
-## Project Information
+``` shell
 $ ./scripts/publish/publish-build-artifacts.sh [github username]
 ```
-### Folder structure
+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.
 * `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.
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 The MIT License
-Copyright (c) 2014-2016 Google, Inc. http://angular.io
+Copyright (c) 2014-2017 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
--- a/NAMING.md
+++ b/NAMING.md
@ -1,7 +1,7 @@
-Naming Conventions in Angular2
+Naming Conventions in Angular
 ---
-In general Angular2 should follow TypeScript naming conventions.
+In general Angular should follow TypeScript naming conventions.
 See: https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines
--- a/README.md
+++ b/README.md
@ -1,19 +1,18 @@
 [![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)
 [![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/pr?style=flat)](http://issuestats.com/github/angular/angular)
-[![Issue Stats](http://issuestats.com/github/angular/angular/badge/issue)](http://issuestats.com/github/angular/angular)
+[![Issue Stats](http://issuestats.com/github/angular/angular/badge/issue?style=flat)](http://issuestats.com/github/angular/angular)
-[![npm version](https://badge.fury.io/js/angular2.svg)](http://badge.fury.io/js/angular2)
+[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://badge.fury.io/js/%40angular%2Fcore)
 [![Downloads](http://img.shields.io/npm/dm/angular2.svg)](https://npmjs.org/package/angular2)
 [![Sauce Test Status](https://saucelabs.com/browser-matrix/angular2-ci.svg)](https://saucelabs.com/u/angular2-ci)
 *Safari (7+), iOS (7+), Edge (14) and IE mobile (11) are tested on [BrowserStack][browserstack].*
 Angular
 =========
-Angular is a development platform for building mobile and desktop web applications. This is the
+Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript (JS) and other languages.
 repository for [Angular 2][ng2], both the JavaScript (JS) and [Dart][dart] versions.
 Angular 2 is currently in **Beta**.
 ## Quickstart
@ -25,11 +24,7 @@ Angular 2 is currently in **Beta**.
 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).
-
+[browserstack]: https://www.browserstack.com/
 [contributing]: http://github.com/angular/angular/blob/master/CONTRIBUTING.md
 [dart]: http://www.dartlang.org
 [dartium]: http://www.dartlang.org/tools/dartium
 [quickstart]: https://angular.io/docs/ts/latest/quickstart.html
-[ng2]: http://angular.io
+[ng]: http://angular.io
 [ngDart]: http://angulardart.org
 [ngJS]: http://angularjs.org
--- a/SAVED_REPLIES.md
+++ b/SAVED_REPLIES.md
@ -0,0 +1,62 @@
 # 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 (v1)
 ```
 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 plunker reproducing the problem and describing the difference between the expected and current behavior. You can use this plunker template: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue
 ```
 ## Angular: Don't Understand (v1)
 ```
 I'm sorry but we don't understand the problem you are reporting.
 If the problem still exists please open a new issue and provide a plunker reproducing the problem and describing the difference between the expected and current behavior. You can use this plunker template: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue
 ```
 ## Angular: 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: 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).
 ```
--- a/TOOLS.md
+++ b/TOOLS.md
@ -1,4 +1,140 @@
-# Developer Tools for Angular 2
+# Developer Tools for Angular
- [JavaScript](TOOLS_JS.md)
+Here you will find a collection of tools and tips for keeping your application
- [Dart](TOOLS_DART.md)
+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 {enableDebugTools} from '@angular/platform-browser';
 bootstrap(Application).then((appRef) => {
  enableDebugTools(appRef);
 });
 ```
 ### 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 withing 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).
--- a/TOOLS_DART.md
+++ b/TOOLS_DART.md
@ -1,376 +0,0 @@
 # Developer Tools for Dart
 Use these tools and techniques to increase your app's performance
 and reliability.
 * [Angular debugging tools](#angular-debugging-tools)
 * [Code size](#code-size)
 * [Performance](#performance)
 ## Angular debugging tools
 Starting with alpha.38, Angular provides a set of debugging tools
 that are accessible from any browser's developer console.
 In Chrome, you can get to the dev console by pressing
 Ctrl + Shift + J (on Mac: Cmd + Opt + J).
 ### Enabling the debugging tools
 By default the debugging tools are disabled.
 Enable the debugging tools as follows:
 ```dart
 import 'package:angular2/platform/browser.dart';
 main() async {
  var appRef = await bootstrap(Application);
  enableDebugTools(appRef);
 }
 ```
 <!-- Change function name to enableDebuggingTools? -->
 ### Using the debugging tools
 In the browser, open the dev console. The top-level object is called `ng` and
 contains more specific tools inside it.
 For example, to run the change detection profiler on your app:
 ```javascript
 // In the dev console:
 ng.profiler.timeChangeDetection();
 ```
 The [Change detection profiler](#change-detection-profiler) section
 has more details.
 <!-- Point to API docs when they're published, if they're useful.
 They should be under
 http://www.dartdocs.org/documentation/angular2/latest
 and/or
 https://angular.io/docs/js/latest/api/. -->
 ## Code size
 Code must be downloaded, parsed, and executed. Too much code can lead to
 slow application start-up time, especially on slow networks and low-end devices.
 The tools and techniques in this section can help you to identify
 unnecessarily large code and to reduce code size.
 ### Finding contributors to code size
 Options for investigating code size include the `--dump-info` dart2js option,
 ng2soyc, `reflector.trackUsage()`, and code coverage information
 from the Dart VM.
 #### Use --dump-info
 The `--dump-info` option of `dart2js` outputs information about what happened
 during compilation. You can specify `--dump-info` in `pubspec.yaml`:
 ```yaml
 transformers:
 ...
 - $dart2js:
    commandLineOptions:
    - --dump-info
 ```
 The [Dump Info Visualizer](https://github.com/dart-lang/dump-info-visualizer)
 can help you analyze the output.
 For more information, see the
 [dart2js_info API reference](http://dart-lang.github.io/dart2js_info/doc/api/).
 #### Use ng2soyc.dart
 [ng2soyc](https://github.com/angular/ng2soyc.dart) is a utility for analyzing
 code size contributors in Angular 2 applications. It groups code size by
 library and, assuming your library names follow
 [standard naming conventions](https://www.dartlang.org/articles/style-guide/#do-prefix-library-names-with-the-package-name-and-a-dot-separated-path)
 (package.library.sublibrary...), gives the code size breakdown at
 each level. To reduce noise in the output of very large apps, ng2soyc provides
 an option to hide libraries that are too small, so you can focus on the biggest
 contributors.
 #### Find unused reflection data
 Your app might have types that are annotated with `@Component` or `@Injectable`
 but never used.
 To find these unused types, use `reflector.trackUsage()` and then,
 after exercising your app, `reflector.listUnusedKeys()`.
 For example:
 ```
 import 'package:angular2/src/core/reflection/reflection.dart';
 ...
 main() async {
  reflector.trackUsage();
  await bootstrap(AppComponent);
  print('Unused keys: ${reflector.listUnusedKeys()}');
 }
 ```
 When you run that code (in Dartium or another browser),
 you'll see a list of types that Angular _can_ inject but hasn't needed to.
 Consider removing those types or their `@Component`/`@Injectable` annotation
 to decrease your app's code size.
 Three conditions must be true for `listUnusedKeys()` to return helpful data:
 1. The angular2 transformer must run on the app.
 2. If you're running a JavaScript version of the app,
   the app must not be minified, so that the names are readable.
 3. You must exercise your app in as many ways as possible
   before calling `listUnusedKeys()`.
   Otherwise, you might get false positives:
   keys that haven't been used only because you didn't exercise
   the relevant feature of the app.
 To run the angular2 transformer, first specify it in `pubspec.yaml`:
 ```
 name: hello_world
 ...
 transformers:
 - angular2:
    entry_points: web/main.dart
 ```
 Then use pub to run the transformer. If you use `pub serve`,
 it provides both Dart and unminified (by default) JavaScript versions.
 If you want to serve actual files, then use `pub build` in debug mode
 to generate Dart and unminified JavaScript files:
 `pub build --mode=debug`.
 The `reflector.trackUsage()` method makes Angular track the reflection
 information used by the app. Reflection information (`ReflectionInfo`) is a data
 structure that stores information that Angular uses for locating DI factories
 and for generating change detectors and other code related to a
 given type.
 #### Use code coverage to find dead code
 When running in Dartium (or in the Dart VM, in general) you can request code
 coverage information from the VM. You can either use
 [observatory](https://www.dartlang.org/tools/observatory/) or download
 the coverage file and use your own tools to inspect it. Lines of code that are
 not covered are top candidates for dead code.
 Keep in mind, however, that uncovered code is not sufficient evidence of dead
 code, only necessary evidence. It is perfectly possible that you simply didn't
 exercise your application in a way that triggers the execution of uncovered
 code. A common example is error handling code. Just because your testing never
 encountered an error does not mean the error won't happen in production. You
 therefore don't have to rush and remove all the `catch` blocks.
 ### Reducing code size
 To reduce code size, you can disable reflection,
 enable minification, and manually remove dead code.
 You can also try less safe options such as
 telling dart2js to trust type annotations.
 #### Disable reflection
 `dart:mirrors` allows discovering program metadata at runtime. However, this
 means that `dart2js` needs to retain that metadata and thus increase the size
 of resulting JS output. In practice, however, it is possible to extract most
 metadata necessary for your metaprogramming tasks statically using a
 transformer and `package:analyzer`, and act on it before compiling to JS.
 #### Enable minification
 Minification shortens all your `longMethodNames` into 2- or 3-letter long
 symbols. `dart2js` ensures that this kind of renaming is done safely, without
 breaking the functionality of your programs. You can enable it in `pubspec.yaml`
 under `$dart2js` transformer:
 ```yaml
 transformers:
 ...
 - $dart2js:
    minify: true
 ```
 #### Manually remove dead code
 `dart2js` comes with dead code elimination out-of-the-box. However, it may not
 always be able to tell if a piece of code could be used. Consider the following
 example:
 ```dart
 /// This function decides which serialization format to use
 void setupSerializers() {
  if (server.doYouSupportProtocolBuffers()) {
    useProtobufSerializers();
  } else {
    useJsonSerializers();
  }
 }
 ```
 In this example the application asks the server what kind of serialization
 format it uses and dynamically chooses one or the other. `dart2js` can't
 tell whether the server responds with yes or no, so it must retain both
 kinds of serializers. However, if you know that your server supports
 protocol buffers, you can remove that `if` block entirely and default to
 protocol buffers.
 Code coverage (see above) is a good way to find dead code in your app.
 #### Unsafe options
 Dart also provides more aggressive optimization options. However, you have to
 be careful when using them and as of today the benefits aren't that clear. If
 your type annotations are inaccurate you may end up with non-Darty runtime
 behavior, including the classic "undefined is not a function" tautology, as
 well as the "keep on truckin'" behavior, e.g. `null + 1 == 1` and
 `{} + [] == 0`.
 `--trust-type-annotations` tells `dart2js` to trust that your type annotations
 are correct. So if you have a function `foo(Bar bar)` the compiler can omit the
 check that `bar` is truly `Bar` when calling methods on it.
 `--trust-primitives` tells `dart2js` that primitive types, such as numbers and
 booleans are never `null` when performing arithmetic, and that your program
 does not run into range error when operating on lists, letting the compiler
 remove some of the error checking code.
 Specify these options in `pubspec.yaml`.
 Example:
 ```yaml
 transformers:
 ...
 - $dart2js:
    commandLineOptions:
    - --trust-type-annotations
    - --trust-primitives
 ```
 ## Performance
 ### Change detection profiler
 If your application is janky (it misses frames) or is slow according to other
 metrics, you need to find out why. This tool helps by measuring the average
 speed of _change detection_, a phase in Angular's
 lifecycle that detects changes in values that are bound to the UI.
 Janky UI updates can result from slowness either in _computing_ the changes or
 in _applying_ those changes to the UI.
 For your app to be performant, the process of _computing_ changes must be very
 fast—preferably **under 3 milliseconds**.
 Fast change computation leaves room for
 the application logic, UI updates, and browser rendering pipeline
 to fit within a 16 ms frame (assuming a target frame rate of 60 FPS).
 The 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
 (in milliseconds) to perform a single cycle of change detection and
 prints that to the console. This number depends on the current state of the UI. You are likely to see different numbers
 as you go from one screen in your application to another.
 #### Running the profiler
 Before running the profiler, enable the debugging tools
 and put the app into the state you want to measure:
 1. If you haven't already done so,
   [enable the debugging tools](#enabling-the-debugging-tools).
 2. Navigate the app to a screen whose performance you want to profile.
 3. Make sure the screen is in a state that you want to measure.
   For example, you might want to profile the screen several times,
   with different amounts and kinds of data.
 To run the profiler, enter the following in the dev console:
 ```javascript
 ng.profiler.timeChangeDetection();
 ```
 The results are visible in the console.
 #### Recording CPU profiles
 To record a profile, pass `{record: true}` to `timeChangeDetection()`:
 ```javascript
 ng.profiler.timeChangeDetection({record: true});
 ```
 Then open the **Profiles** tab. The recorded profile has the title
 **Change Detection**. In Chrome, if you record the profile repeatedly, all the
 profiles are nested under Change Detection.
 #### Interpreting the numbers
 In a properly designed application, repeated attempts to detect changes without
 any user actions result in no changes to 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.
 #### 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 helps to understand how change detection works. Such a
 discussion is outside the scope of this document,
 but here are some key concepts.
 <!-- TODO: link to change detection docs -->
 By default, Angular uses a _dirty checking_ mechanism to find 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 might contribute to slow change detection. A good way to
 speed things up is to use plain class fields in your expressions and avoid any
 kind of computation. For example:
 ```dart
@View(
  template: '<button [enabled]="isEnabled">{{title}}</button>'
 )
 class FancyButton {
  // GOOD: no computation, just returns the value
  bool isEnabled;
  // BAD: computes the final value upon request
  String _title;
  String get title => _title.trim().toUpperCase();
 }
 ```
 Most cases like these can 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.
 <!-- TODO: link to discussion of push model -->
--- a/TOOLS_JS.md
+++ b/TOOLS_JS.md
@ -1,140 +0,0 @@
 # Developer Tools for JavaScript
 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 {enableDebugTools} from 'angular2/platform/browser';
 bootstrap(Application).then((appRef) => {
  enableDebugTools(appRef);
 });
 ```
 ### 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 withing 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).
--- a/TRIAGE_AND_LABELS.md
+++ b/TRIAGE_AND_LABELS.md
@ -1,31 +1,105 @@
-# Triage Process and Github Labels for Angular 2
+# Triage Process and Github Labels for Angular
-This document describes how the Angular team uses labels and milestones to triage issues on github.
+This document describes how the Angular team uses labels and milestones 
 to triage issues on github. The basic idea of the process is that
 caretaker only assigns a component and type (bug, feature) label. The 
 owner of the component than is in full control of how the issues should 
 be triaged further.
-# Issues and PRs
+Once this process is implemented and in use, we will revisit it to see 
-## Triaged vs Untriaged Issues
+if further labeling is needed.
-Every triaged issue must have four attributes assigned to it:
+## Components
-* `priority` -- P0 through P4. P0 issues are "drop everything and do this now". P4 are nice to have.
+A caretaker should be able to determine which component the issue 
-* `component` -- Which area of Angular knowledge this relates to.
+belongs to. The components have a clear piece of source code associated
-* `effort` -- Rough assessment of how much work this issue is. E.g. `effort: easy` means 
+with it.
 "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. 
+* `comp: animations`: `@matsko`
 * `comp: benchpress`: `@tbosch`
 * `comp: build & ci`: `@IgorMinar` -- All build and CI scripts 
 * `comp: common`: `@mhevery`  -- This includes core components / pipes.
 * `comp: core & compiler`: `@tbosch` -- Because core and compiler are very 
  intertwined, we will be treating them as one.
 * `comp: forms`: `@kara`
 * `comp: http`: `@jeffbcross`
 * `comp: i18n`: `@vicb`
 * `comp: language service`: `@chuckjaz`
 * `comp: metadata-extractor`: `@chuckjaz`
 * `comp: router`: `@vicb`
 * `comp: testing`: `@juliemr`
 * `comp: upgrade`: `@mhevery`
 * `comp: web-worker`: `@vicb`
 * `comp: zones`: `@mhevery`
-You can view a report of untriaged issues here, in our 
+There are few components which are cross-cutting. They don't have
-[Angular Triage Dashboard](http://mhevery.github.io/github_issues/).
+a clear location in the source tree. We will treat them as a component
 even thought no specific source tree is associated with them.
 * `comp: docs`: `@naomiblack`
 * `comp: packaging`: `@IgorMinar`
 * `comp: performance`: `@tbosch`
 * `comp: security`: `@IgorMinar`
 ## Type
 What kind of problem is this?
 * `type: RFC / discussion / question`
 * `type: bug`
 * `type: chore`
 * `type: feature`
 * `type: performance`
 * `type: refactor`
 ## Caretaker Triage Process
 It is the caretaker's responsibility to assign `comp:  *` to each new
 issue as they come in. 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
 At this point we are leaving each component owner to determine their own
 process for their component.
 It will be up to the component owner to determine the order in which the
 issues within the component will be resolved.
 Several owners have 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`
 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.
+* 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:
@ -37,7 +111,10 @@ We aim to only have at most three milestones open at a time:
 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
+## Triaged vs Untrained PRs
 PRs should also be label with a `comp: *` so that it is clear which 
 primary area the PR effects.
 Because of the cumulative pain associated with rebasing PRs, we triage PRs daily, and 
 closing or reviewing PRs is a top priority ahead of other ongoing work. 
@ -63,90 +140,6 @@ 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: core/webworker` -- core web worker infrastructure
 * `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
@ -160,9 +153,6 @@ More active discussion is needed before the issue can be worked on further. Typi
 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.
--- a/angular.io/.firebaserc
+++ b/angular.io/.firebaserc
@ -0,0 +1,5 @@
 {
  "projects": {
    "staging": "aio-staging"
  }
 }
--- a/angular.io/README.md
+++ b/angular.io/README.md
@ -0,0 +1,31 @@
 # Site
 This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.26.
 ## 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/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/).
 Before running the tests make sure you are serving the app via `ng serve`.
 ## Deploying to GitHub Pages
 Run `ng github-pages:deploy` to deploy to GitHub Pages.
 ## 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).
--- a/angular.io/angular-cli.json
+++ b/angular.io/angular-cli.json
@ -0,0 +1,59 @@
 {
  "project": {
    "version": "1.0.0-beta.26",
    "name": "site"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "aio",
      "styles": [
        "styles.scss"
      ],
      "scripts": [
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
 }
--- a/angular.io/database.rules.json
+++ b/angular.io/database.rules.json
@ -0,0 +1,6 @@
 {
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
 }
--- a/angular.io/e2e/app.e2e-spec.ts
+++ b/angular.io/e2e/app.e2e-spec.ts
@ -0,0 +1,36 @@
 import { SitePage } from './app.po';
 describe('site App', function() {
  let page: SitePage;
  beforeAll(done => {
    // Hack:  CI has been failing on first test so
    // buying time by giving the browser a wake-up call.
    // Todo:  Find and fix the root cause for flakes.
    new SitePage().navigateTo().then(done);
  });
  beforeEach(() => {
    page = new SitePage();
  });
  it('should show features text after clicking "Features"', () => {
    page.navigateTo()
      .then(() => {
        return page.featureLink.click();
      })
      .then(() => {
        expect(page.getDocViewerText()).toContain('Progressive web apps');
      });
  });
  it('should convert code-example in pipe.html', () => {
    page.navigateTo()
      .then(() => {
        return page.datePipeLink.click();
      })
      .then(() => {
        expect(page.codeExample.count()).toBeGreaterThan(0, 'should have code-example content');
      });
  });
 });
--- a/angular.io/e2e/app.po.ts
+++ b/angular.io/e2e/app.po.ts
@ -0,0 +1,19 @@
 import { browser, element, by } from 'protractor';
 export class SitePage {
  links = element.all(by.css('md-toolbar a'));
  datePipeLink = element(by.css('md-toolbar a[aioNavLink="docs/api/common/date-pipe"]'));
  docViewer = element(by.css('aio-doc-viewer'));
  codeExample = element.all(by.css('aio-doc-viewer code-example > pre > code'));
  featureLink = element(by.css('md-toolbar a[aioNavLink="features"]'));
  navigateTo() {
    return browser.get('/');
  }
  getDocViewerText() {
    return this.docViewer.getText();
  }
 }
--- a/angular.io/e2e/tsconfig.json
+++ b/angular.io/e2e/tsconfig.json
@ -0,0 +1,16 @@
 {
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc-e2e",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
 }
--- a/angular.io/firebase.json
+++ b/angular.io/firebase.json
@ -0,0 +1,14 @@
 {
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
 }
--- a/angular.io/karma.conf.js
+++ b/angular.io/karma.conf.js
@ -0,0 +1,42 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/0.13/config/configuration-file.html
 module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-remap-istanbul'),
      require('@angular/cli/plugins/karma')
    ],
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    remapIstanbulReporter: {
      reports: {
        html: 'coverage',
        lcovonly: './coverage/coverage.lcov'
      }
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'karma-remap-istanbul']
              : ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
 };
--- a/angular.io/package.json
+++ b/angular.io/package.json
@ -0,0 +1,56 @@
 {
  "name": "angular.io",
  "version": "0.0.0",
  "main": "index.js",
  "repository": "git@github.com:angular/angular.git",
  "author": "Angular",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "deploy-staging": "firebase use staging --token \"$FIREBASE_TOKEN\" && yarn run ~~deploy",
    "pre~~deploy": "ng build --prod",
    "~~deploy": "firebase deploy --message \"Commit: $TRAVIS_COMMIT\" --non-interactive --token \"$FIREBASE_TOKEN\""
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "^1.0.0-beta.29",
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "firebase-tools": "^3.2.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "2.0.10"
  }
 }
--- a/angular.io/protractor.conf.js
+++ b/angular.io/protractor.conf.js
@ -0,0 +1,36 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 /*global jasmine */
 var SpecReporter = require('jasmine-spec-reporter');
 exports.config = {
  allScriptsTimeout: 11000,
  getPageTimeout: 30000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      binary: process.env.CHROME_BIN
    }
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e'
    });
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter());
  }
 };
--- a/angular.io/src/app/app.component.html
+++ b/angular.io/src/app/app.component.html
@ -0,0 +1,11 @@
 <md-toolbar color="primary" class="app-toolbar">
    <span>Angular</span>
    <span><a class="nav-link" aioNavLink="home"> Home </a></span>
    <span><a class="nav-link" aioNavLink="news"> News</a></span>
    <span><a class="nav-link" aioNavLink="features"> Features</a></span>
    <span><a class="nav-link" aioNavLink="docs/api/common/date-pipe"> DatePipe</a></span>
    <span class="fill-remaining-space"></span>
 </md-toolbar>
 <section class="app-content">
  <aio-doc-viewer [doc]="navEngine.currentDoc"></aio-doc-viewer>
 </section>
--- a/angular.io/src/app/app.component.scss
+++ b/angular.io/src/app/app.component.scss
@ -0,0 +1,8 @@
 .fill-remaining-space {
  flex: 1 1 auto;
 }
 .nav-link {
  margin-right: 10px;
  margin-left: 20px;
  cursor: pointer;
 }
--- a/angular.io/src/app/app.component.spec.ts
+++ b/angular.io/src/app/app.component.spec.ts
@ -0,0 +1,29 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
 import { NavEngine } from './nav-engine/nav-engine.service';
 describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ AppModule ],
      providers: [
        { provide: NavEngine, useValue: { currentDoc: undefined } }
      ]
    });
    TestBed.compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  });
  it('should create', () => {
    expect(component).toBeDefined();
  });
 });
--- a/angular.io/src/app/app.component.ts
+++ b/angular.io/src/app/app.component.ts
@ -0,0 +1,12 @@
 import { Component } from '@angular/core';
 import { NavEngine } from './nav-engine/nav-engine.service';
@Component({
  selector: 'aio-shell',
  templateUrl: './app.component.html',
  styleUrls:  ['./app.component.scss']
 })
 export class AppComponent {
  constructor(public navEngine: NavEngine) {}
 }
--- a/angular.io/src/app/app.module.ts
+++ b/angular.io/src/app/app.module.ts
@ -0,0 +1,35 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
 import { MdToolbarModule } from '@angular/material/toolbar';
 import { MdButtonModule} from '@angular/material/button';
 import { AppComponent } from './app.component';
 import { DocViewerComponent } from './doc-viewer/doc-viewer.component';
 import { embeddedComponents, EmbeddedComponents } from './embedded';
 import { Logger } from './logger.service';
 import { navDirectives, navProviders } from './nav-engine';
@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    MdToolbarModule.forRoot(),
    MdButtonModule.forRoot()
  ],
  declarations: [
    AppComponent,
    embeddedComponents,
    DocViewerComponent,
    navDirectives,
  ],
  providers: [
    EmbeddedComponents,
    Logger,
    navProviders
  ],
  entryComponents: [ embeddedComponents ],
  bootstrap: [AppComponent]
 })
 export class AppModule {
 }
--- a/angular.io/src/app/doc-viewer/doc-viewer.component.spec.ts
+++ b/angular.io/src/app/doc-viewer/doc-viewer.component.spec.ts
@ -0,0 +1,308 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFactoryResolver, ElementRef, Injector, NgModule, OnInit, ViewChild } from '@angular/core';
 import { Doc, DocMetadata } from '../nav-engine';
 import { DocViewerComponent } from '../doc-viewer/doc-viewer.component';
 import { embeddedComponents, EmbeddedComponents } from '../embedded';
 /// Embedded Test Components ///
 ///// FooComponent /////
@Component({
  selector: 'aio-foo',
  template: `Foo Component`
 })
 class FooComponent {
 }
 ///// BarComponent /////
@Component({
  selector: 'aio-bar',
  template: `
    <hr>
    <h2>Bar Component</h2>
    <p #barContent></p>
    <hr>
  `
 })
 class BarComponent implements OnInit {
  @ViewChild('barContent') barContentRef: ElementRef;
  constructor(public elementRef: ElementRef) { }
  // Project content in ngOnInit just like CodeExampleComponent
  ngOnInit() {
    // Security: this is a test component; never deployed
    this.barContentRef.nativeElement.innerHTML = this.elementRef.nativeElement.aioBarContent;
  }
 }
 ///// BazComponent /////
@Component({
  selector: 'aio-baz',
  template: `
    <div>++++++++++++++</div>
    <h2>Baz Component</h2>
    <p #bazContent></p>
    <div>++++++++++++++</div>
  `
 })
 class BazComponent implements OnInit {
  @ViewChild('bazContent') bazContentRef: ElementRef;
  constructor(public elementRef: ElementRef) { }
  // Project content in ngOnInit just like CodeExampleComponent
  ngOnInit() {
    // Security: this is a test component; never deployed
    this.bazContentRef.nativeElement.innerHTML = this.elementRef.nativeElement.aioBazContent;
  }
 }
 ///// Test Module //////
 const embeddedTestComponents = [FooComponent, BarComponent, BazComponent, ...embeddedComponents];
@NgModule({
  entryComponents: embeddedTestComponents
 })
 class TestModule { }
 //// Test Component //////
@Component({
  selector: 'aio-test',
  template: `
    <aio-doc-viewer>Test Component</aio-doc-viewer>
  `
 })
 class TestComponent {
  private currentDoc: Doc;
  @ViewChild(DocViewerComponent) docViewer: DocViewerComponent;
  setDoc(doc: Doc) {
    if (this.docViewer) {
      this.docViewer.doc = doc;
    }
  }
 }
 //////// Tests //////////////
 describe('DocViewerComponent', () => {
  const mockDocMetadata: DocMetadata = { id: 'mock', title: 'Mock Doc', url: '' };
  let component: TestComponent;
  let docViewerDE: DebugElement;
  let docViewerEl: HTMLElement;
  let fixture: ComponentFixture<TestComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ TestModule ],
      declarations: [
        TestComponent,
        DocViewerComponent,
        embeddedTestComponents
      ],
      providers: [
        {provide: EmbeddedComponents, useValue: {components: embeddedTestComponents}}
      ]
    })
    .compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    docViewerDE = fixture.debugElement.children[0];
    docViewerEl = docViewerDE.nativeElement;
  });
  it('should create a DocViewer', () => {
    expect(component.docViewer).toBeTruthy();
  });
  it(('should display nothing when set DocViewer.doc to doc w/o content'), () => {
    component.docViewer.doc = { metadata: mockDocMetadata, content: '' };
    expect(docViewerEl.innerHTML).toBe('');
  });
  it(('should display simple static content doc'), () => {
    const content = '<p>Howdy, doc viewer</p>';
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    expect(docViewerEl.innerHTML).toEqual(content);
  });
  it(('should display nothing after reset static content doc'), () => {
    const content = '<p>Howdy, doc viewer</p>';
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    fixture.detectChanges();
    component.docViewer.doc = { metadata: mockDocMetadata, content: '' };
    expect(docViewerEl.innerHTML).toEqual('');
  });
  it(('should apply FooComponent'), () => {
    const content = `
      <p>Above Foo</p>
      <p><aio-foo></aio-foo></p>
      <p>Below Foo</p>
    `;
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    const fooHtml = docViewerEl.querySelector('aio-foo').innerHTML;
    expect(fooHtml).toContain('Foo Component');
  });
  it(('should apply multiple FooComponents'), () => {
    const content = `
      <p>Above Foo</p>
      <p><aio-foo></aio-foo></p>
      <div style="margin-left: 2em;">
        Holds a
        <aio-foo>Ignored text</aio-foo>
      </div>
      <p>Below Foo</p>
    `;
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    const foos = docViewerEl.querySelectorAll('aio-foo');
    expect(foos.length).toBe(2);
  });
  it(('should apply BarComponent'), () => {
    const content = `
      <p>Above Bar</p>
      <aio-bar></aio-bar>
      <p>Below Bar</p>
    `;
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    const barHtml = docViewerEl.querySelector('aio-bar').innerHTML;
    expect(barHtml).toContain('Bar Component');
  });
  it(('should project bar content into BarComponent'), () => {
    const content = `
      <p>Above Bar</p>
      <aio-bar>###bar content###</aio-bar>
      <p>Below Bar</p>
    `;
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    // necessary to trigger projection within ngOnInit
    fixture.detectChanges();
    const barHtml = docViewerEl.querySelector('aio-bar').innerHTML;
    expect(barHtml).toContain('###bar content###');
  });
  it(('should include Foo and Bar'), () => {
    const content = `
      <p>Top</p>
      <p><aio-foo>ignored</aio-foo></p>
      <aio-bar>###bar content###</aio-bar>
      <p><aio-foo></aio-foo></p>
      <p>Bottom</p>
    `;
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    // necessary to trigger Bar's projection within ngOnInit
    fixture.detectChanges();
    const foos = docViewerEl.querySelectorAll('aio-foo');
    expect(foos.length).toBe(2, 'should have 2 foos');
    const barHtml = docViewerEl.querySelector('aio-bar').innerHTML;
    expect(barHtml).toContain('###bar content###', 'should have bar with projected content');
  });
  it(('should not include Bar within Foo'), () => {
    const content = `
      <p>Top</p>
      <div>
        <aio-foo>
          <aio-bar>###bar content###</aio-bar>
        </aio-foo>
      </div>
      <p><aio-foo></aio-foo><p>
      <p>Bottom</p>
    `;
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    // necessary to trigger Bar's projection within ngOnInit
    fixture.detectChanges();
    const foos = docViewerEl.querySelectorAll('aio-foo');
    expect(foos.length).toBe(2, 'should have 2 foos');
    const bars = docViewerEl.querySelectorAll('aio-bar');
    expect(bars.length).toBe(0, 'did not expect Bar inside Foo');
  });
  // because FooComponents are processed before BazComponents
  it(('should include Foo within Bar'), () => {
    const content = `
      <p>Top</p>
      <aio-bar>
        <div style="margin-left: 2em">
          Inner <aio-foo></aio-foo>
        </div>
      </aio-bar>
      <p><aio-foo></aio-foo></p>
      <p>Bottom</p>
    `;
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    // necessary to trigger Bar's projection within ngOnInit
    fixture.detectChanges();
    const foos = docViewerEl.querySelectorAll('aio-foo');
    expect(foos.length).toBe(2, 'should have 2 foos');
    const bars = docViewerEl.querySelectorAll('aio-bar');
    expect(bars.length).toBe(1, 'should have a bar');
    expect(bars[0].innerHTML).toContain('Bar Component', 'should have bar template content');
  });
  // The <aio-baz> tag and its inner content is copied
  // But the BazComponent is not created and therefore its template content is not displayed
  // because BarComponents are processed before BazComponents
  // and no chance for first Baz inside Bar to be processed by builder.
  it(('should NOT include Bar within Baz'), () => {
    const content = `
      <p>Top</p>
      <aio-bar>
        <div style="margin-left: 2em">
          Inner <aio-baz>---baz stuff---</aio-baz>
        </div>
      </aio-bar>
      <p><aio-baz>---More baz--</aio-baz></p>
      <p>Bottom</p>
    `;
    component.docViewer.doc = { metadata: mockDocMetadata, content };
    // necessary to trigger Bar's projection within ngOnInit
    fixture.detectChanges();
    const bazs = docViewerEl.querySelectorAll('aio-baz');
    // Both baz tags are there ...
    expect(bazs.length).toBe(2, 'should have 2 bazs');
    expect(bazs[0].innerHTML).not.toContain('Baz Component',
      'did not expect 1st Baz template content');
    expect(bazs[1].innerHTML).toContain('Baz Component',
      'expected 2nd Baz template content');
  });
 });
--- a/angular.io/src/app/doc-viewer/doc-viewer.component.ts
+++ b/angular.io/src/app/doc-viewer/doc-viewer.component.ts
@ -0,0 +1,130 @@
 import {
  Component, ComponentFactory, ComponentFactoryResolver, ComponentRef,
  DoCheck, ElementRef, Injector, Input, OnDestroy, ViewEncapsulation
 } from '@angular/core';
 import { Doc, DocMetadata } from '../nav-engine';
 import { EmbeddedComponents } from '../embedded';
 interface EmbeddedComponentFactory {
  contentPropertyName: string;
  factory: ComponentFactory<any>;
 }
 // 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 DoCheck, OnDestroy {
  private displayedDoc: DisplayedDoc;
  private embeddedComponentFactories: Map<string, EmbeddedComponentFactory> = new Map();
  private hostElement: HTMLElement;
  constructor(
    componentFactoryResolver: ComponentFactoryResolver,
    elementRef: ElementRef,
    embeddedComponents: EmbeddedComponents,
    private injector: Injector,
    ) {
    this.hostElement = elementRef.nativeElement;
    // Security: the initialDocViewerContent comes from the prerendered DOM and is considered to be secure
    this.hostElement.innerHTML = initialDocViewerContent;
    for (const component of embeddedComponents.components) {
      const factory = componentFactoryResolver.resolveComponentFactory(component);
      const selector = factory.selector;
      const contentPropertyName = this.selectorToContentPropertyName(selector);
      this.embeddedComponentFactories.set(selector, { contentPropertyName, factory });
    }
  }
  @Input()
  set doc(newDoc: Doc) {
    this.ngOnDestroy();
    if (newDoc) {
      window.scrollTo(0, 0);
      this.build(newDoc);
    }
  }
  /**
   * Add doc content to host element and build it out with embedded components
   */
  private build(doc: Doc) {
    const displayedDoc = this.displayedDoc = new DisplayedDoc(doc);
    // security: the doc.content is always authored by the documentation team
    // and is considered to be safe
    this.hostElement.innerHTML = doc.content || '';
    if (!doc.content) { return; }
    // TODO(i): why can't I use for-of? why doesn't typescript like Map#value() iterators?
    this.embeddedComponentFactories.forEach(({ contentPropertyName, factory }, selector) => {
      const embeddedComponentElements = this.hostElement.querySelectorAll(selector);
      // cast due to https://github.com/Microsoft/TypeScript/issues/4947
      for (const element of embeddedComponentElements as any as HTMLElement[]){
        // hack: preserve the current element content because the factory will empty it out
        // security: the source of this innerHTML is always authored by the documentation team
        // and is considered to be safe
        element[contentPropertyName] = element.innerHTML;
        displayedDoc.addEmbeddedComponent(factory.create(this.injector, [], element));
      }
    });
  }
  ngDoCheck() {
    if (this.displayedDoc) { this.displayedDoc.detectChanges(); }
  }
  ngOnDestroy() {
    // destroy components otherwise there will be memory leaks
    if (this.displayedDoc) {
      this.displayedDoc.destroy();
      this.displayedDoc = undefined;
    }
  }
  /**
   * Compute the component content property name by converting the selector to camelCase and appending
   * 'Content', e.g. live-example => liveExampleContent
   */
  private selectorToContentPropertyName(selector: string) {
    return selector.replace(/-(.)/g, (match, $1) => $1.toUpperCase()) + 'Content';
  }
 }
 class DisplayedDoc {
  metadata: DocMetadata;
  private embeddedComponents: ComponentRef<any>[] = [];
  constructor(doc: Doc) {
    // ignore doc.content ... don't need to keep it around
    this.metadata = doc.metadata;
  }
  addEmbeddedComponent(component: ComponentRef<any>) {
    this.embeddedComponents.push(component);
  }
  detectChanges() {
    this.embeddedComponents.forEach(comp => comp.changeDetectorRef.detectChanges());
  }
  destroy() {
    // destroy components otherwise there will be memory leaks
    this.embeddedComponents.forEach(comp => comp.destroy());
    this.embeddedComponents.length = 0;
  }
 }
--- a/angular.io/src/app/embedded/code-example.component.spec.ts
+++ b/angular.io/src/app/embedded/code-example.component.spec.ts
@ -0,0 +1,28 @@
 /* tslint:disable:no-unused-variable */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 import { CodeExampleComponent } from './code-example.component';
 describe('CodeExampleComponent', () => {
  let component: CodeExampleComponent;
  let fixture: ComponentFixture<CodeExampleComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CodeExampleComponent ]
    })
    .compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(CodeExampleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(component).toBeTruthy();
  });
 });
--- a/angular.io/src/app/embedded/code-example.component.ts
+++ b/angular.io/src/app/embedded/code-example.component.ts
@ -0,0 +1,73 @@
 /* tslint:disable component-selector */
 import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 // TODO(i): add clipboard copy functionality
 /**
 * Angular.io Code Example
 *
 * Pretty renders a code block, primarily used in the docs and API reference. Can be used within an Angular app, or
 * independently, provided that it is dynamically generated by the component resolver.
 *
 * Usage:
 *   <code-example [language]="..." [escape]="..." [format]="..." [showcase]="..." [animated]="...">
 *     console.log('Hello World')
 *   </code-example>
 */
@Component({
  selector: 'code-example',
  template: '<pre class="{{classes}}"><code class="{{animatedClasses}}" #codeContainer></code></pre>'
 })
 export class CodeExampleComponent implements OnInit, AfterViewInit {
  @ViewChild('codeContainer') codeContainerRef: ElementRef;
  language: string; // could be javascript, dart, typescript
  // TODO(i): escape doesn't seem to be currently supported in the original code
  escape: string; // could be 'html'
  format: string; // some css class
  showcase: string; // a string with the value 'true'
  animated = false;
  // TODO(i): could we use @HostBinding instead or does the CSS have to be scoped to <pre> and <code>
  classes: string;
  animatedClasses: string;
  constructor(private elementRef: ElementRef) {
    // TODO(i): @Input should be supported for host elements and should just do a one off initialization of properties
    //          from the host element => talk to Tobias
    ['language', 'escape', 'format', 'showcase', 'animated'].forEach(inputName => {
      if (!this[inputName]) {
        this[inputName] = this.elementRef.nativeElement.getAttribute(inputName);
      }
    });
  }
  ngOnInit() {
    const showcaseClass = this.showcase === 'true' ? ' is-showcase' : '';
    this.classes = `
      prettyprint
      ${this.format ? this.format : ''}
      ${this.language ? 'lang-' + this.language : '' }
      ${showcaseClass ? showcaseClass : ''}
    `.trim();
    this.animatedClasses = `${this.animated ? 'animated fadeIn' : ''}`;
    // Security: the codeExampleContent is the original innerHTML of the host element provided by
    //           docs authors and as such its considered to be safe for innerHTML purposes
    this.codeContainerRef.nativeElement.innerHTML = this.elementRef.nativeElement.codeExampleContent;
  }
  ngAfterViewInit() {
    // TODO(i): import prettify.js from this file so that we don't need to preload it via index.html
    // whenever a code example is used, use syntax highlighting.
    // if(prettyPrint) {
    //   prettyPrint();
    // }
  }
 }
--- a/angular.io/src/app/embedded/index.ts
+++ b/angular.io/src/app/embedded/index.ts
@ -0,0 +1,11 @@
 import { CodeExampleComponent } from './code-example.component';
 /** Components that can be embedded in docs such as CodeExampleComponent, LiveExampleComponent,... */
 export const embeddedComponents = [
  CodeExampleComponent
 ];
 /** Injectable class w/ property returning components that can be embedded in docs */
 export class EmbeddedComponents {
  components = embeddedComponents;
 }
--- a/angular.io/src/app/logger.service.ts
+++ b/angular.io/src/app/logger.service.ts
@ -0,0 +1,17 @@
 import { Injectable } from '@angular/core';
@Injectable()
 export class Logger {
  log(value: any, ...rest) {
    console.log(value, ...rest);
  }
  error(value: any, ...rest) {
    console.error(value, ...rest);
  }
  warn(value: any, ...rest) {
    console.warn(value, ...rest);
  }
 }
--- a/angular.io/src/app/nav-engine/doc-fetching.service.spec.ts
+++ b/angular.io/src/app/nav-engine/doc-fetching.service.spec.ts
@ -0,0 +1,2 @@
 import { DocFetchingService } from './doc-fetching.service';
 // Write tests when/if this service is retained.
--- a/angular.io/src/app/nav-engine/doc-fetching.service.ts
+++ b/angular.io/src/app/nav-engine/doc-fetching.service.ts
@ -0,0 +1,45 @@
 import { Http, Response } from '@angular/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
 import { Logger } from '../logger.service';
@Injectable()
 export class DocFetchingService {
  constructor(private http: Http, private logger: Logger) { }
  /**
   * Fetch document from server.
   * NB: pass 404 response to caller as empty string content
   * Other errors and non-OK status responses are thrown errors.
   * TODO: add timeout and retry for lost connection
   */
  getFile(url: string): Observable<string> {
    if (!url) {
      const emsg = 'getFile: no URL';
      this.logger.error(emsg);
      throw new Error(emsg);
    }
    this.logger.log('fetching document file at ', url);
    return this.http.get(url)
      .map(res => res.text())
      .do(content => this.logger.log('fetched document file at ', url) )
      .catch((error: Response) => {
        if (error.status === 404) {
          this.logger.error(`Document file not found at '$(url)'`);
          return of('');
        } else {
          throw error;
        }
      });
  }
 }
--- a/angular.io/src/app/nav-engine/doc.model.ts
+++ b/angular.io/src/app/nav-engine/doc.model.ts
@ -0,0 +1,10 @@
 export interface DocMetadata {
  id: string;    // 'home'
  title: string; // 'Home'
  url: string;   // 'assets/documents/home.html'
 }
 export interface Doc {
  metadata: DocMetadata;
  content: string;
 }
--- a/angular.io/src/app/nav-engine/doc.service.spec.ts
+++ b/angular.io/src/app/nav-engine/doc.service.spec.ts
@ -0,0 +1,74 @@
 import { fakeAsync, tick } from '@angular/core/testing';
 import { DocService } from './doc.service';
 import { Doc, DocMetadata } from './doc.model';
 import { DocFetchingService } from './doc-fetching.service';
 import { SiteMapService } from './sitemap.service';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/delay';
 describe('DocService', () => {
  let docFetchingService: DocFetchingService;
  let getFileSpy: jasmine.Spy;
  let loggerSpy: any;
  let siteMapService: SiteMapService;
  let docService: DocService;
  beforeEach(() => {
    this.content = 'fake file contents';
    this.metadata = {
      id: 'fake',
      title: 'All about the fake',
      url: 'assets/documents/fake.html'
    };
    loggerSpy = jasmine.createSpyObj('logger', ['log', 'warn', 'error']);
    siteMapService = new SiteMapService();
    spyOn(siteMapService, 'getDocMetadata').and
      .callFake((id: string) => of(this.metadata).delay(0));
    docFetchingService = new DocFetchingService(null, loggerSpy);
    getFileSpy = spyOn(docFetchingService, 'getFile').and
      .callFake((url: string) => of(this.content).delay(0));
    docService = new DocService(docFetchingService, loggerSpy, siteMapService);
  });
  it('should return fake doc for fake id', fakeAsync(() => {
    docService.getDoc('fake').subscribe(doc =>
      expect(doc.content).toBe(this.content)
    );
    tick();
  }));
  it('should retrieve file once for first file request', fakeAsync(() => {
    docService.getDoc('fake').subscribe();
    expect(getFileSpy.calls.count()).toBe(0, 'no call before tick');
    tick();
    expect(getFileSpy.calls.count()).toBe(1, 'one call after tick');
  }));
  it('should retrieve file from cache the second time', fakeAsync(() => {
    docService.getDoc('fake').subscribe();
    tick();
    expect(getFileSpy.calls.count()).toBe(1, 'one call after 1st request');
    docService.getDoc('fake').subscribe();
    tick();
    expect(getFileSpy.calls.count()).toBe(1, 'still only one call after 2nd request');
  }));
  it('should pass along file error through its getDoc observable result', fakeAsync(() => {
    const err = 'deliberate file error';
    getFileSpy.and.throwError(err);
    docService.getDoc('fake').subscribe(
      doc => expect(false).toBe(true, 'should have failed'),
      error => expect(error.message).toBe(err)
    );
    tick();
  }));
 });
--- a/angular.io/src/app/nav-engine/doc.service.ts
+++ b/angular.io/src/app/nav-engine/doc.service.ts
@ -0,0 +1,60 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/switchMap';
 import { Doc, DocMetadata } from './doc.model';
 import { DocFetchingService } from './doc-fetching.service';
 import { Logger } from '../logger.service';
 import { SiteMapService } from './sitemap.service';
 interface DocCache {
  [index: string]: Doc;
 }
@Injectable()
 export class DocService {
  private cache: DocCache = {};
  constructor(
    private fileService: DocFetchingService,
    private logger: Logger,
    private siteMapService: SiteMapService
    ) { }
  /**
   * Get document for documentId, from cache if found else server.
   * Pass server errors along to caller
   * Caller should interpret empty string content as "404 - file not found"
   */
  getDoc(documentId: string): Observable<Doc> {
    let doc = this.cache[documentId];
    if (doc) {
      this.logger.log('returned cached content for ', doc.metadata);
      return of(cloneDoc(doc));
    }
    return this.siteMapService
      .getDocMetadata(documentId)
      .switchMap(metadata => {
        return this.fileService.getFile(metadata.url)
          .map(content => {
            this.logger.log('fetched content for', metadata);
            doc = { metadata, content };
            this.cache[metadata.id] = doc;
            return cloneDoc(doc);
          });
      });
  }
 }
 function cloneDoc(doc: Doc) {
  return {
    metadata: Object.assign({}, doc.metadata),
    content: doc.content
  };
 }
--- a/angular.io/src/app/nav-engine/index.ts
+++ b/angular.io/src/app/nav-engine/index.ts
@ -0,0 +1,18 @@
 import { DocService } from './doc.service';
 import { DocFetchingService } from './doc-fetching.service';
 import { NavEngine } from './nav-engine.service';
 import { NavLinkDirective } from './nav-link.directive';
 import { SiteMapService } from './sitemap.service';
 export { Doc, DocMetadata } from './doc.model';
 export const navDirectives = [
  NavLinkDirective
 ];
 export const navProviders = [
  DocService,
  DocFetchingService,
  NavEngine,
  SiteMapService,
 ];
--- a/angular.io/src/app/nav-engine/nav-engine.service.spec.ts
+++ b/angular.io/src/app/nav-engine/nav-engine.service.spec.ts
@ -0,0 +1,46 @@
 import { fakeAsync, tick} from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import 'rxjs/add/operator/delay';
 import { DocService } from './doc.service';
 import { Doc, DocMetadata } from './doc.model';
 import { NavEngine } from './nav-engine.service';
 const fakeDoc: Doc = {
  metadata: {
    id: 'fake',
    title: 'All about the fake',
    url: 'assets/documents/fake.html'
  },
  content: 'fake content'
 };
 describe('NavEngine', () => {
  let navEngine: NavEngine;
  beforeEach(() => {
    this.fakeDoc = {
      metadata: {
        id: 'fake',
        title: 'All about the fake',
        url: 'assets/documents/fake.html'
      },
      content: 'fake content'
    };
    const docService: any = jasmine.createSpyObj('docService', ['getDoc']);
    docService.getDoc.and.callFake((id: string) => of(this.fakeDoc).delay(0));
    navEngine = new NavEngine(docService);
  });
  it('should set currentDoc to fake doc when navigate to fake id', fakeAsync(() => {
    navEngine.navigate('fake');
    tick();
    expect(navEngine.currentDoc.content).toBe(this.fakeDoc.content);
  }));
 });
--- a/angular.io/src/app/nav-engine/nav-engine.service.ts
+++ b/angular.io/src/app/nav-engine/nav-engine.service.ts
@ -0,0 +1,25 @@
 import { Injectable } from '@angular/core';
 import { Doc } from './doc.model';
 import { DocService } from './doc.service';
@Injectable()
 export class NavEngine {
  /** Document result of most recent `navigate` call */
  currentDoc: Doc;
  constructor(private docService: DocService) {}
  /**
   * Navigate sets `currentDoc` to the document for `documentId`.
   * TODO: handle 'Document not found', signaled by empty string content
   * TODO: handle document retrieval error
   */
  navigate(documentId: string) {
    this.docService.getDoc(documentId).subscribe(
      doc => this.currentDoc = doc
    );
  }
 }
--- a/angular.io/src/app/nav-engine/nav-link.directive.ts
+++ b/angular.io/src/app/nav-engine/nav-link.directive.ts
@ -0,0 +1,19 @@
 import { Directive, HostListener, Input } from '@angular/core';
 import { NavEngine } from './nav-engine.service';
@Directive({
  selector: '[aioNavLink]'
 })
 export class NavLinkDirective {
  @Input()
  aioNavLink: string;
  constructor(private navEngine: NavEngine) { }
  @HostListener('click', ['$event'])
  onClick($event) {
    this.navEngine.navigate(this.aioNavLink);
    return false;
  }
 }
--- a/angular.io/src/app/nav-engine/sitemap.service.spec.ts
+++ b/angular.io/src/app/nav-engine/sitemap.service.spec.ts
@ -0,0 +1,32 @@
 import { fakeAsync, tick } from '@angular/core/testing';
 import { DocMetadata } from './doc.model';
 import { SiteMapService } from './sitemap.service';
 describe('SiteMapService', () => {
  let siteMapService: SiteMapService;
  beforeEach(() => {
    siteMapService = new SiteMapService();
  });
  it('should get News metadata', fakeAsync(() => {
    siteMapService.getDocMetadata('news').subscribe(
      metadata => expect(metadata.url).toBe('assets/documents/news.html')
    );
    tick();
  }));
  it('should calculate expected doc url for unknown id', fakeAsync(() => {
    siteMapService.getDocMetadata('fizbuz').subscribe(
      metadata => expect(metadata.url).toBe('assets/documents/fizbuz.html')
    );
    tick();
  }));
  it('should calculate expected index doc url for unknown id ending in /', fakeAsync(() => {
    siteMapService.getDocMetadata('fizbuz/').subscribe(
      metadata => expect(metadata.url).toBe('assets/documents/fizbuz/index.html')
    );
    tick();
  }));
 });
--- a/angular.io/src/app/nav-engine/sitemap.service.ts
+++ b/angular.io/src/app/nav-engine/sitemap.service.ts
@ -0,0 +1,38 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import 'rxjs/add/operator/map';
 import { DocMetadata } from './doc.model';
 const siteMap: DocMetadata[] = [
  { 'title': 'Home', 'url': 'assets/documents/home.html', id: 'home'},
  { 'title': 'Features', 'url': 'assets/documents/features.html', id: 'features'},
  { 'title': 'News', 'url': 'assets/documents/news.html', id: 'news'}
 ];
@Injectable()
 export class SiteMapService {
  private siteMap = new BehaviorSubject(siteMap);
  getDocMetadata(id: string) {
    const missing = () => this.getMissingMetadata(id);
    return this.siteMap
      .map(map =>
        map.find(d => d.id === id) || missing());
  }
  // Alternative way to calculate metadata. Will it be used?
  private getMissingMetadata(id: string) {
    const filename = id.startsWith('/') ? id.substring(1) : id; // strip leading '/'
    return {
      id,
      title: id,
      url: `assets/documents/${filename}${filename.endsWith('/') ? 'index' : ''}.html`
    } as DocMetadata;
  }
 }
--- a/modules/@angular/examples/animate/ts/.gitkeep
+++ b/modules/@angular/examples/animate/ts/.gitkeep
--- a/angular.io/src/assets/documents/docs/api/common/date-pipe.html
+++ b/angular.io/src/assets/documents/docs/api/common/date-pipe.html
@ -0,0 +1,239 @@
 <header class="hero background-sky"><h1 class="hero-title is-standard-case">DatePipe</h1><span
    class="badge is-stable">Stable</span>
  <div class="clear"></div>
  <h2 class="hero-subtitle">Pipe</h2></header>
 <article class="l-content-small grid-fluid docs-content">
  <div layout="row" layout-xs="column" class="row-margin">
    <div flex="20" flex-xs="100"><h2 class="h2-api-docs">What it does</h2></div>
    <div flex="80" flex-xs="100"><p>Formats a date according to locale rules.</p>
    </div>
  </div>
  <div layout="row" layout-xs="column" class="row-margin">
    <div flex="20" flex-xs="100"><h2 class="h2-api-docs">How to use</h2></div>
    <div flex="80" flex-xs="100"><p><code>date_expression | date[:format]</code></p>
    </div>
  </div>
  <div layout="row" layout-xs="column" class="row-margin">
    <div flex="20" flex-xs="100"><h2 class="h2-api-docs">NgModule</h2></div>
    <div flex="80" flex-xs="100" class="code-links">CommonModule
    </div>
  </div>
  <div layout="row" layout-xs="column" class="row-margin">
    <div flex="20" flex-xs="100"><h2 class="h2-api-docs">Description</h2></div>
    <div flex="80" flex-xs="100" class="code-links"><p>Where:</p>
      <ul>
        <li><code>expression</code> is a date object or a number (milliseconds since UTC epoch) or
          an ISO string
          (<a href="https://www.w3.org/TR/NOTE-datetime">https://www.w3.org/TR/NOTE-datetime</a>).
        </li>
        <li><code>format</code> indicates which date/time components to include. The format can be
          predifined as
          shown below or custom as shown in the table.
          <ul>
            <li><code>&#39;medium&#39;</code>: equivalent to <code>&#39;yMMMdjms&#39;</code> (e.g.
              <code>Sep 3, 2010, 12:05:08 PM</code> for <code>en-US</code>)
            </li>
            <li><code>&#39;short&#39;</code>: equivalent to <code>&#39;yMdjm&#39;</code> (e.g.
              <code>9/3/2010, 12:05 PM</code> for <code>en-US</code>)
            </li>
            <li><code>&#39;fullDate&#39;</code>: equivalent to <code>&#39;yMMMMEEEEd&#39;</code>
              (e.g. <code>Friday, September 3, 2010</code> for <code>en-US</code>)
            </li>
            <li><code>&#39;longDate&#39;</code>: equivalent to <code>&#39;yMMMMd&#39;</code> (e.g.
              <code>September 3, 2010</code> for <code>en-US</code>)
            </li>
            <li><code>&#39;mediumDate&#39;</code>: equivalent to <code>&#39;yMMMd&#39;</code> (e.g.
              <code>Sep 3, 2010</code> for <code>en-US</code>)
            </li>
            <li><code>&#39;shortDate&#39;</code>: equivalent to <code>&#39;yMd&#39;</code> (e.g.
              <code>9/3/2010</code> for <code>en-US</code>)
            </li>
            <li><code>&#39;mediumTime&#39;</code>: equivalent to <code>&#39;jms&#39;</code> (e.g.
              <code>12:05:08 PM</code> for <code>en-US</code>)
            </li>
            <li><code>&#39;shortTime&#39;</code>: equivalent to <code>&#39;jm&#39;</code> (e.g.
              <code>12:05 PM</code> for <code>en-US</code>)
            </li>
          </ul>
        </li>
      </ul>
      <table>
        <thead>
        <tr>
          <th>Component</th>
          <th style="text-align:center">Symbol</th>
          <th>Narrow</th>
          <th>Short Form</th>
          <th>Long Form</th>
          <th>Numeric</th>
          <th>2-digit</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>era</td>
          <td style="text-align:center">G</td>
          <td>G (A)</td>
          <td>GGG (AD)</td>
          <td>GGGG (Anno Domini)</td>
          <td>-</td>
          <td>-</td>
        </tr>
        <tr>
          <td>year</td>
          <td style="text-align:center">y</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>y (2015)</td>
          <td>yy (15)</td>
        </tr>
        <tr>
          <td>month</td>
          <td style="text-align:center">M</td>
          <td>L (S)</td>
          <td>MMM (Sep)</td>
          <td>MMMM (September)</td>
          <td>M (9)</td>
          <td>MM (09)</td>
        </tr>
        <tr>
          <td>day</td>
          <td style="text-align:center">d</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>d (3)</td>
          <td>dd (03)</td>
        </tr>
        <tr>
          <td>weekday</td>
          <td style="text-align:center">E</td>
          <td>E (S)</td>
          <td>EEE (Sun)</td>
          <td>EEEE (Sunday)</td>
          <td>-</td>
          <td>-</td>
        </tr>
        <tr>
          <td>hour</td>
          <td style="text-align:center">j</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>j (13)</td>
          <td>jj (13)</td>
        </tr>
        <tr>
          <td>hour12</td>
          <td style="text-align:center">h</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>h (1 PM)</td>
          <td>hh (01 PM)</td>
        </tr>
        <tr>
          <td>hour24</td>
          <td style="text-align:center">H</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>H (13)</td>
          <td>HH (13)</td>
        </tr>
        <tr>
          <td>minute</td>
          <td style="text-align:center">m</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>m (5)</td>
          <td>mm (05)</td>
        </tr>
        <tr>
          <td>second</td>
          <td style="text-align:center">s</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>s (9)</td>
          <td>ss (09)</td>
        </tr>
        <tr>
          <td>timezone</td>
          <td style="text-align:center">z</td>
          <td>-</td>
          <td>-</td>
          <td>z (Pacific Standard Time)</td>
          <td>-</td>
          <td>-</td>
        </tr>
        <tr>
          <td>timezone</td>
          <td style="text-align:center">Z</td>
          <td>-</td>
          <td>Z (GMT-8:00)</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
        </tr>
        <tr>
          <td>timezone</td>
          <td style="text-align:center">a</td>
          <td>-</td>
          <td>a (PM)</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
        </tr>
        </tbody>
      </table>
      <p>In javascript, only the components specified will be respected (not the ordering,
        punctuations, ...) and details of the formatting will be dependent on the locale.</p>
      <p>Timezone of the formatted text will be the local system timezone of the end-user&#39;s
        machine.</p>
      <p>WARNINGS:</p>
      <ul>
        <li>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).
        </li>
        <li>this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and
          Opera
          browsers.
        </li>
      </ul>
      <h3 id="examples">Examples</h3>
      <p>Assuming <code>dateObj</code> is (year: 2015, month: 6, day: 15, hour: 21, minute: 43,
        second: 11)
        in the <em>local</em> time and locale is &#39;en-US&#39;:</p>
      <code-example format="linenums" language="js">{{ dateObj | date }} // output is &#039;Jun 15,
        2015&#039;
        {{ dateObj | date:&#039;medium&#039; }} // output is &#039;Jun 15, 2015, 9:43:11 PM&#039;
        {{ dateObj | date:&#039;shortTime&#039; }} // output is &#039;9:43 PM&#039;
        {{ dateObj | date:&#039;mmss&#039; }} // output is &#039;43:11&#039;
      </code-example>
      <div class="code-example">
        <code-example language="ts" format="linenums">@Component({
          selector: &#39;date-pipe&#39;,
          template: `&lt;div&gt;
          &lt;p&gt;Today is {{today | date}}&lt;/p&gt;
          &lt;p&gt;Or if you prefer, {{today | date:&#39;fullDate&#39;}}&lt;/p&gt;
          &lt;p&gt;The time is {{today | date:&#39;jmZ&#39;}}&lt;/p&gt;
          &lt;/div&gt;`
          })
          export class DatePipeComponent {
          today: number = Date.now();
          }
        </code-example>
      </div>
    </div>
  </div>
  <p class="location-badge">exported from <a href="index.html">@angular/common/index</a>
    defined in <a
        href="https://github.com/angular/angular/tree/2.2.0-beta.1/modules/@angular/common/src/pipes/date_pipe.ts#L12-L116">@angular/common/src/pipes/date_pipe.ts</a>
  </p></article>
--- a/angular.io/src/assets/documents/docs/api/index.html
+++ b/angular.io/src/assets/documents/docs/api/index.html
@ -0,0 +1,7 @@
 <br><br>
 TODO: api index doc
 <br><br>
 In the meantime visit our awesome <a href="docs/api/common/date-pipe">DatePipe API page</a>.
 <br><br>
 <br><br>
 <br><br>
--- a/angular.io/src/assets/documents/docs/guide/overview.html
+++ b/angular.io/src/assets/documents/docs/guide/overview.html
@ -0,0 +1 @@
 TODO: guide overview doc
--- a/angular.io/src/assets/documents/docs/index.html
+++ b/angular.io/src/assets/documents/docs/index.html
@ -0,0 +1,7 @@
 <br><br>
 TODO: docs index doc
 <br><br>
 <a href="docs/api/">API index page</a>
 <br><br>
 <br><br>
 <br><br>
--- a/angular.io/src/assets/documents/events.html
+++ b/angular.io/src/assets/documents/events.html
@ -0,0 +1,38 @@
 <header class="hero background-sky"><h1 class="hero-title ">Events</h1>
  <div class="clear"></div>
  <h2 class="hero-subtitle">Where we'll be presenting</h2>
 </header>
 <article class="l-content ">
  <table class="is-full-width">
    <thead>
    <tr>
      <th>Event</th>
      <th>Location</th>
      <th>Date</th>
    </tr>
    </thead>
    <tbody><!-- Devoxx Belgium -->
    <tr>
      <th><a target="_blank" href="https://www.devoxx.be/">Devoxx Belgium</a></th>
      <td>Antwerp, Belgium</td>
      <td>Nov. 7-11, 2016</td>
    </tr><!-- DEVIntersection -->
    <tr>
      <th><a target="_blank" href="https://www.devintersectioneurope.com/">DEVintersection
        Europe</a></th>
      <td>Amsterdam, Netherlands</td>
      <td>Nov 14-16, 2016</td>
    </tr><!-- dotJS -->
    <tr>
      <th><a target="_blank" href="http://www.dotjs.io/">dotJS</a></th>
      <td>Paris, France</td>
      <td>Dec. 5, 2016</td>
    </tr><!-- NG-BE -->
    <tr>
      <th><a target="_blank" href="https://ng-be.org/">NG-BE</a></th>
      <td>Ghent, Belgium</td>
      <td>Dec. 9, 2016</td>
    </tr>
    </tbody>
  </table>
 </article>
--- a/angular.io/src/assets/documents/features.html
+++ b/angular.io/src/assets/documents/features.html
@ -0,0 +1,64 @@
 <header class="hero background-sky"><h1 class="hero-title ">Features &amp; Benefits</h1>
  <div class="clear"></div>
 </header>
 <article class="l-content ">
  <div>
    <div><h2 class="text-headline">Cross Platform</h2>
      <div class="feature-row">
        <div class="feature"><h3>Progressive web apps</h3>
          <p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
            High performance, offline, and zero-step installation.</p></div>
        <div class="feature"><h3>Native</h3>
          <p class="text-body">Build native mobile apps with strategies from Ionic Framework,
            NativeScript, and React Native.</p></div>
        <div class="feature"><h3>Desktop</h3>
          <p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using
            the same Angular methods you've learned for the web plus the ability to access native OS
            APIs.</p></div>
      </div>
      <h2 class="text-headline">Speed and Performance</h2>
      <div class="feature-row">
        <div class="feature"><h3>Code generation</h3>
          <p class="text-body">Angular turns your templates into code that's highly optimized for
            today's JavaScript virtual machines, giving you all the benefits of hand-written code
            with the productivity of a framework.</p></div>
        <div class="feature"><h3>Universal</h3>
          <p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and
            other servers for near-instant rendering in just HTML and CSS. Also paves the way for
            sites that optimize for SEO.</p></div>
        <div class="feature"><h3>Code splitting</h3>
          <p class="text-body">Angular apps load quickly with the new Component Router, which
            delivers automatic code-splitting so users only load code required to render the view
            they request.</p></div>
      </div>
      <h2 class="text-headline">Productivity</h2>
      <div class="feature-row">
        <div class="feature"><h3>Templates</h3>
          <p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
        </div>
        <div class="feature"><h3>Angular CLI</h3>
          <p class="text-body">Command line tools: start building fast, add components and tests,
            then instantly deploy.</p></div>
        <div class="feature"><h3>IDEs</h3>
          <p class="text-body">Get intelligent code completion, instant errors, and other feedback
            in popular editors and IDEs.</p></div>
      </div>
      <h2 class="text-headline">Full Development Story</h2>
      <div class="feature-row">
        <div class="feature"><h3>Testing</h3>
          <p class="text-body">With Karma for unit tests, you can know if you've broken things every
            time you save. And Protractor makes your scenario tests run faster and in a stable
            manner.</p></div>
        <div class="feature"><h3>Animation</h3>
          <p class="text-body">Create high-performance, complex choreographies and animation
            timelines with very little code through Angular's intuitive API.</p></div>
        <div class="feature"><h3>Accessibility</h3>
          <p class="text-body">Create accessible applications with ARIA-enabled components,
            developer guides, and built-in a11y test infrastructure.</p></div>
      </div>
    </div>
  </div>
  <div class="cta-bar"><a href="/docs/ts/latest/quickstart.html" md-button="md-button"
                          class="button button-large button-shield md-raised md-primary">Get
    Started</a></div>
 </article>
--- a/angular.io/src/assets/documents/home.html
+++ b/angular.io/src/assets/documents/home.html
@ -0,0 +1,72 @@
 <header class="background-sky l-relative">
  <div class="hero background-superhero-paper is-large"><img
      src="assets/images/logos/angular2/angular.svg" class="hero-logo"/>
    <h1 class="text-headline">One framework.<br>Mobile &amp; desktop.</h1><a
        href="/docs/ts/latest/quickstart.html" md-button="md-button"
        class="hero-cta md-raised button button-large button-plain">Get Started</a></div>
  <announcement-bar class="announcement-bar">
    <div class="announcement-bar-slide cleafix is-visible"><img
        src="assets/images/logos/anglebrackets/devintersection.png" width="64"/>
      <p>Join us for <strong>DEVintersection Amsterdam</strong> Nov 14-16!</p><a
          href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button md-button">Register
        now</a></div>
  </announcement-bar>
 </header>
 <article class="l-content ">
  <div class="home-rows"><!-- Group 1-->
    <div layout="row" layout-xs="column" class="home-row">
      <div class="promo-img-container promo-1">
        <div><img src="assets/images/home/responsive-framework.svg"></div>
      </div>
      <div class="text-container">
        <div class="text-block promo-1-desc l-pad-top-2"><h3 class="text-headline">Develop Across
          All Platforms</h3>
          <p class="text-body">Learn one way to build applications with Angular and reuse your code
            and abilities to build apps for any deployment target. For web, mobile web, native
            mobile and native desktop.
          </p></div>
      </div>
    </div><!-- Group 2-->
    <div layout="row" layout-xs="column" class="home-row">
      <div class="text-container">
        <div class="text-block"><h3 class="text-headline">Speed & Performance</h3>
          <p class="text-body">Achieve the maximum speed possible on the Web Platform today, and
            take it further, via Web Workers and server-side rendering.</p>
          <p class="text-body">Angular puts you in control over scalability. Meet huge data
            requirements by building data models on RxJS, Immutable.js or another push-model.</p>
        </div>
      </div>
      <div class="promo-img-container promo-2">
        <div><img src="assets/images/home/speed-performance.svg"></div>
      </div>
    </div><!-- Group 3-->
    <div layout="row" layout-xs="column" class="home-row">
      <div class="promo-img-container promo-3">
        <div><img src="assets/images/home/joyful-development.png"></div>
      </div>
      <div class="text-container">
        <div class="text-block promo-3-desc"><h3 class="text-headline">Incredible Tooling</h3>
          <p class="text-body">Build features quickly with simple, declarative templates. Extend the
            template language with your own components and use a wide array of existing components.
            Get immediate Angular-specific help and feedback with nearly every IDE and editor. All
            this comes together so you can focus on building amazing apps rather than trying to make
            the code work.
          </p></div>
      </div>
    </div><!-- Group 4-->
    <div layout="row" layout-xs="column" class="home-row">
      <div class="text-container">
        <div class="text-block l-pad-top-2"><h3 class="text-headline">Loved by Millions</h3>
          <p class="text-body">From prototype through global deployment, Angular delivers the
            productivity and scalable infrastructure that supports Google's largest
            applications.</p></div>
      </div>
      <div class="promo-img-container promo-4">
        <div><img src="assets/images/home/loved-by-millions.png"></div>
      </div>
    </div>
    <div class="cta-bar"><a href="/docs/ts/latest/quickstart.html" md-button="md-button"
                            class="button button-large button-shield md-raised md-primary">Get
      Started</a></div>
  </div>
 </article>
--- a/angular.io/src/assets/documents/news.html
+++ b/angular.io/src/assets/documents/news.html
@ -0,0 +1,115 @@
 <header class="hero background-sky"><h1 class="hero-title ">News</h1>
  <div class="clear"></div>
 </header>
 <article class="l-content ">
  <div class="grid-fluid l-space-bottom-2">
    <div class="c12 text-center"><h3 class="text-headline text-uppercase"> Core Team</h3></div>
    <div class="clear"></div>
  </div>
  <div class="grid-fluid">
    <div class="c6">
      <div class="article-card">
        <div class="date">Oct 12, 2016</div>
        <div class="title"><a target="_blank"
                              href="http://angularjs.blogspot.com/2016/10/angular-210-now-available.html">Angular
          2.1.0 Now Available</a></div>
        <p>Angular version 2.1.0 - incremental-metamorphosis - is a minor release following our
          announced adoption of Semantic Versioning...</p>
        <div class="author"><img src="assets/images/bios/stephenfluin.jpg">
          <div class="posted">Posted by <b>Stephen Fluin</b></div>
        </div>
      </div>
    </div>
    <div class="c6">
      <div class="article-card">
        <div class="date">Oct 7, 2016</div>
        <div class="title"><a target="_blank"
                              href="http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html">Versioning
          and Releasing Angular</a></div>
        <p>In order for the ecosystem around Angular to thrive, developers need stability from the
          Angular framework so that reusable components and libraries, tools and learned practices
          don’t go obsolete unexpectedly...</p>
        <div class="author"><img src="assets/images/bios/igor-minar.jpg">
          <div class="posted">Posted by <b>Igor Minar</b></div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-fluid l-space-bottom-2 l-space-top-4">
    <div class="c12 text-center"><h3 class="text-headline text-uppercase"> Developer Community</h3>
    </div>
    <div class="clear"></div>
  </div>
  <div class="grid-fluid">
    <div class="c6">
      <div class="article-card">
        <div class="date">Oct 30, 2016</div>
        <div class="title"><a target="_blank"
                              href="https://www.thepolyglotdeveloper.com/2016/10/use-pre-populated-sqlite-database-nativescript-angular-2/">Use
          A Pre-Populated SQLite Database With NativeScript And Angular 2</a></div>
        <p>I figured it would be a good idea to demonstrate how to ship a NativeScript Angular 2
          application with a pre-filled SQLite database rather than populating it on-the-fly....</p>
        <div class="author"><img src="assets/images/bios/shield-bio-placeholder.png">
          <div class="posted">Posted by <b>Nic Raboy</b></div>
        </div>
      </div>
    </div>
    <div class="c6">
      <div class="article-card">
        <div class="date">Oct 13, 2016</div>
        <div class="title"><a target="_blank"
                              href="http://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html">Two-way
          Data Binding in Angular 2</a></div>
        <p>If there was one feature in Angular that made us go “Wow”, then it was probably its
          two-way data binding system. Changes in the application state have been automagically
          reflected into the view...</p>
        <div class="author"><img src="assets/images/bios/angular-gde-bio-placeholder.png">
          <div class="posted">Posted by <b>Pascal Precht</b></div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-fluid">
    <div class="c6">
      <div class="article-card">
        <div class="date">Oct 10, 2016</div>
        <div class="title"><a target="_blank"
                              href="http://www.creativebloq.com/how-to/build-a-material-design-app-with-angular-2">Build
          a Material Design app with Angular 2</a></div>
        <p>This walkthrough reveals how to create a DialogComponent and to-do app with Angular
          Material and the Angular CLI...</p>
        <div class="author"><img src="assets/images/bios/shield-bio-placeholder.png">
          <div class="posted">Posted by <b>Daniel Zen</b></div>
        </div>
      </div>
    </div>
    <div class="c6">
      <div class="article-card">
        <div class="date">Sept 30, 2016</div>
        <div class="title"><a target="_blank"
                              href="http://www.simb.co/angular-cli-using-docker/?platform=hootsuite">Using
          Angular CLI to create Angular 2 applications in Docker</a></div>
        <p>Angular CLI is a great tool for developing Angular 2 applications. I thought it would be
          fun to do a quick demo...</p>
        <div class="author"><img src="assets/images/bios/shield-bio-placeholder.png">
          <div class="posted">Posted by <b>Simeon Bateman</b></div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-fluid l-space-bottom-2 l-space-top-4">
    <div class="c12 text-center"><h3 class="text-headline text-uppercase">Twitter</h3></div>
    <div class="clear"></div>
    <div class="grid-fluid">
      <div class="c3"><p></p></div>
      <div class="c6">
        <div class="article-card">
          <div class="title"><a href="http://twitter.com/angularjs" data-show-count="false"
                                class="twitter-follow-button">Follow @angularjs</a></div>
          <p><a class="twitter-timeline" data-chrome="nofooter noborders noheader"
                href="http://twitter.com/angularjs" data-widget-id="700150278465523713"></a></p>
        </div>
      </div>
    </div>
  </div>
 </article>
--- a/angular.io/src/assets/images/backgrounds/browser-background-template.png
+++ b/angular.io/src/assets/images/backgrounds/browser-background-template.png
--- a/angular.io/src/assets/images/backgrounds/lon-paper.png
+++ b/angular.io/src/assets/images/backgrounds/lon-paper.png
--- a/angular.io/src/assets/images/backgrounds/sf-paper.png
+++ b/angular.io/src/assets/images/backgrounds/sf-paper.png
--- a/angular.io/src/assets/images/backgrounds/super-hero-large.png
+++ b/angular.io/src/assets/images/backgrounds/super-hero-large.png
--- a/angular.io/src/assets/images/bios/alex-eagle.jpg
+++ b/angular.io/src/assets/images/bios/alex-eagle.jpg
--- a/angular.io/src/assets/images/bios/alex-rickabaugh.jpg
+++ b/angular.io/src/assets/images/bios/alex-rickabaugh.jpg
--- a/angular.io/src/assets/images/bios/alex-wolfe.jpg
+++ b/angular.io/src/assets/images/bios/alex-wolfe.jpg
--- a/angular.io/src/assets/images/bios/ali.jpg
+++ b/angular.io/src/assets/images/bios/ali.jpg
--- a/angular.io/src/assets/images/bios/angular-gde-bio-placeholder.png
+++ b/angular.io/src/assets/images/bios/angular-gde-bio-placeholder.png
--- a/angular.io/src/assets/images/bios/brad-green.jpg
+++ b/angular.io/src/assets/images/bios/brad-green.jpg
--- a/angular.io/src/assets/images/bios/brandonroberts.jpg
+++ b/angular.io/src/assets/images/bios/brandonroberts.jpg
--- a/angular.io/src/assets/images/bios/chuckj.jpg
+++ b/angular.io/src/assets/images/bios/chuckj.jpg
--- a/angular.io/src/assets/images/bios/crisbeto.jpg
+++ b/angular.io/src/assets/images/bios/crisbeto.jpg
--- a/angular.io/src/assets/images/bios/david-east.jpg
+++ b/angular.io/src/assets/images/bios/david-east.jpg
--- a/angular.io/src/assets/images/bios/deborah.jpg
+++ b/angular.io/src/assets/images/bios/deborah.jpg
--- a/angular.io/src/assets/images/bios/eladbezalel.jpg
+++ b/angular.io/src/assets/images/bios/eladbezalel.jpg
--- a/angular.io/src/assets/images/bios/eric.jpg
+++ b/angular.io/src/assets/images/bios/eric.jpg
--- a/angular.io/src/assets/images/bios/fatima.jpg
+++ b/angular.io/src/assets/images/bios/fatima.jpg
--- a/angular.io/src/assets/images/bios/filipe-silva.jpg
+++ b/angular.io/src/assets/images/bios/filipe-silva.jpg
--- a/angular.io/src/assets/images/bios/gkalpak.jpg
+++ b/angular.io/src/assets/images/bios/gkalpak.jpg
--- a/angular.io/src/assets/images/bios/hansl.jpg
+++ b/angular.io/src/assets/images/bios/hansl.jpg
--- a/angular.io/src/assets/images/bios/igor-minar.jpg
+++ b/angular.io/src/assets/images/bios/igor-minar.jpg
--- a/angular.io/src/assets/images/bios/jbedard.jpg
+++ b/angular.io/src/assets/images/bios/jbedard.jpg
--- a/angular.io/src/assets/images/bios/jeff-cross.jpg
+++ b/angular.io/src/assets/images/bios/jeff-cross.jpg
--- a/angular.io/src/assets/images/bios/jeffwhelpley.jpg
+++ b/angular.io/src/assets/images/bios/jeffwhelpley.jpg
--- a/angular.io/src/assets/images/bios/jelbourn.jpg
+++ b/angular.io/src/assets/images/bios/jelbourn.jpg
--- a/angular.io/src/assets/images/bios/jesus-rodriguez.jpg
+++ b/angular.io/src/assets/images/bios/jesus-rodriguez.jpg
--- a/angular.io/src/assets/images/bios/john-papa.jpg
+++ b/angular.io/src/assets/images/bios/john-papa.jpg
--- a/angular.io/src/assets/images/bios/juleskremer.jpg
+++ b/angular.io/src/assets/images/bios/juleskremer.jpg
--- a/angular.io/src/assets/images/bios/julie-ralph.jpg
+++ b/angular.io/src/assets/images/bios/julie-ralph.jpg
--- a/angular.io/src/assets/images/bios/kapunahelewong.jpg
+++ b/angular.io/src/assets/images/bios/kapunahelewong.jpg
--- a/angular.io/src/assets/images/bios/kara-erickson.jpg
+++ b/angular.io/src/assets/images/bios/kara-erickson.jpg
--- a/angular.io/src/assets/images/bios/kathy.jpg
+++ b/angular.io/src/assets/images/bios/kathy.jpg
--- a/angular.io/src/assets/images/bios/lucas.jpg
+++ b/angular.io/src/assets/images/bios/lucas.jpg
--- a/angular.io/src/assets/images/bios/marclaval.jpg
+++ b/angular.io/src/assets/images/bios/marclaval.jpg
--- a/angular.io/src/assets/images/bios/marcy.jpg
+++ b/angular.io/src/assets/images/bios/marcy.jpg
--- a/angular.io/src/assets/images/bios/martin-probst.jpg
+++ b/angular.io/src/assets/images/bios/martin-probst.jpg
--- a/angular.io/src/assets/images/bios/martinstaffa.jpg
+++ b/angular.io/src/assets/images/bios/martinstaffa.jpg
--- a/angular.io/src/assets/images/bios/matias.jpg
+++ b/angular.io/src/assets/images/bios/matias.jpg
--- a/Show More
+++ b/Show More
		`@ -0,0 +1,2 @@`
							`import { DocFetchingService } from './doc-fetching.service';`
							`// Write tests when/if this service is retained.`