docs: add changelog for 5.2.11

Requests from clients that are not assigned a client ID by the browser
will produce `fetch` events with `null` or empty (`''`) `clientId`s.

Previously, the ServiceWorker only handled `null` values correctly. Yet
empty strings are also valid (see for example [here][1] and [there][2]).
With this commit, the SW will interpret _all_ falsy `clientId` values
the same (i.e. "no client ID assigned") and handle them appropriately.

Related Chromium issue/discussion: [#832105][3]

[1]: 4cc72bd0f1/docs/index.bs (L1392)
[2]: https://w3c.github.io/ServiceWorker/#fetchevent-interface
[3]: https://bugs.chromium.org/p/chromium/issues/detail?id=832105

Fixes #23526

PR Close #23625

.circleci/bazel.rc

@@ -15,11 +15,16 @@ build --experimental_remote_spawn_cache --remote_rest_cache=http://localhost:764
 # Prevent unstable environment variables from tainting cache keys
 build --experimental_strict_action_env
 
+# Save downloaded repositories such as the go toolchain
+# This directory can then be included in the CircleCI cache
+# It should save time running the first build
+build --experimental_repository_cache=/home/circleci/bazel_repository_cache
+
 # Workaround https://github.com/bazelbuild/bazel/issues/3645
 # Bazel doesn't calculate the memory ceiling correctly when running under Docker.
-# Limit Bazel to consuming resources that fit in CircleCI "medium" class which is the default:
+# Limit Bazel to consuming resources that fit in CircleCI "xlarge" class
 # https://circleci.com/docs/2.0/configuration-reference/#resource_class
-build --local_resources=3072,2.0,1.0
+build --local_resources=14336,8.0,1.0
 
 # Retry in the event of flakes, eg. https://circleci.com/gh/angular/angular/31309
 test --flaky_test_attempts=2

.circleci/config.yml

@@ -13,7 +13,7 @@
 # If you change the `docker_image` version, also change the `cache_key` suffix and the version of
 # `com_github_bazelbuild_buildtools` in the `/WORKSPACE` file.
 var_1: &docker_image angular/ngcontainer:0.1.0
-var_2: &cache_key angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.1.0
+var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.1.0
 
 # See remote cache documentation in /docs/BAZEL.md
 var_3: &setup-bazel-remote-cache
@@ -41,14 +41,14 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      # See remote cache documentation in /docs/BAZEL.md
-      - run: .circleci/setup_cache.sh
-      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
-      - *setup-bazel-remote-cache
 
-      - run: 'yarn buildifier -mode=check ||
-              (echo -e "\nBUILD files not formatted. Please run ''yarn buildifier''" ; exit 1)'
-      - run: 'yarn skylint ||
+      # Check BUILD.bazel formatting before we have a node_modules directory
+      # Then we don't need any exclude pattern to avoid checking those files
+      - run: 'buildifier -mode=check $(find . -type f \( -name BUILD.bazel -or -name BUILD \)) ||
+              (echo "BUILD files not formatted. Please run ''yarn buildifier''" ; exit 1)'
+      # Run the skylark linter to check our Bazel rules
+      - run: 'find . -type f -name "*.bzl" |
+              xargs java -jar /usr/local/bin/Skylint_deploy.jar ||
               (echo -e "\n.bzl files have lint errors. Please run ''yarn skylint''"; exit 1)'
 
       - restore_cache:
@@ -59,7 +59,7 @@ jobs:
 
   build:
     <<: *job_defaults
-    resource_class: large
+    resource_class: xlarge
     steps:
       - checkout:
           <<: *post_checkout
@@ -71,6 +71,7 @@ jobs:
       - restore_cache:
           key: *cache_key
 
+      - run: ls /home/circleci/bazel_repository_cache || true
       - run: bazel info release
       - run: bazel run @yarn//:yarn
       # Use bazel query so that we explicitly ask for all buildable targets to be built as well
@@ -82,6 +83,16 @@ jobs:
           key: *cache_key
           paths:
             - "node_modules"
+            - "~/bazel_repository_cache"
+
+  aio_monitoring:
+    <<: *job_defaults
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - run: xvfb-run --auto-servernum ./aio/scripts/test-production.sh
 
 workflows:
   version: 2
@@ -89,3 +100,13 @@ workflows:
     jobs:
       - lint
       - build
+  aio_monitoring:
+    jobs:
+      - aio_monitoring
+    triggers:
+      - schedule:
+          cron: "0 0 * * *"
+          filters:
+            branches:
+              only:
+                - master

.github/ISSUE_TEMPLATE.md

@@ -25,7 +25,7 @@ ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
 ## Minimal reproduction of the problem with instructions
 <!--
 For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
-https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
+https://stackblitz.com or similar (you can use this template as a starting point: https://stackblitz.com/fork/angular-gitter).
 -->
 
 ## What is the motivation / use case for changing the behavior?

BUILD.bazel

@@ -32,6 +32,7 @@ filegroup(
         "reflect-metadata",
         "source-map-support",
         "minimist",
+        "tslib",
     ] for ext in [
         "*.js",
         "*.json",

CHANGELOG.md

@@ -1,16 +1,97 @@
-<a name="5.2.5"></a>
-## [5.2.5](https://github.com/angular/angular/compare/5.2.4...5.2.5) (2018-02-14)
+<a name="5.2.11"></a>
+## [5.2.11](https://github.com/angular/angular/compare/5.2.10...5.2.11) (2018-05-16)
 
 
 ### Bug Fixes
 
-(https://github.com/angular/angular/commit/15ff7ba)), closes [#21377](https://github.com/angular/angular/issues/21377)
+* **service-worker:** correctly handle requests with empty `clientId` ([#23625](https://github.com/angular/angular/issues/23625)) ([bc27d4a](https://github.com/angular/angular/commit/bc27d4a)), closes [#23526](https://github.com/angular/angular/issues/23526)
+
+
+
+<a name="5.2.10"></a>
+## [5.2.10](https://github.com/angular/angular/compare/5.2.9...5.2.10) (2018-04-16)
+
+
+### Bug Fixes
+
+* **animations:** avoid animation insertions during router back/refresh ([#21977](https://github.com/angular/angular/issues/21977)) ([641cc49](https://github.com/angular/angular/commit/641cc49)), closes [#19712](https://github.com/angular/angular/issues/19712)
+* **common:** properly take className changes into account ([#21937](https://github.com/angular/angular/issues/21937)) ([54e9108](https://github.com/angular/angular/commit/54e9108)), closes [#21932](https://github.com/angular/angular/issues/21932)
+* **compiler:** fix support for html-like text in translatable attributes ([#23053](https://github.com/angular/angular/issues/23053)) ([4f7c369](https://github.com/angular/angular/commit/4f7c369))
+* **compiler-cli:** emit correct css string escape sequences ([#22776](https://github.com/angular/angular/issues/22776)) ([db0afa9](https://github.com/angular/angular/commit/db0afa9))
+* **forms:** improve error message for invalid value accessors ([#22731](https://github.com/angular/angular/issues/22731)) ([dd61595](https://github.com/angular/angular/commit/dd61595))
+* **service-worker:** add badge to NOTIFICATION_OPTION_NAMES ([#23241](https://github.com/angular/angular/issues/23241)) ([7b23983](https://github.com/angular/angular/commit/7b23983)), closes [#23196](https://github.com/angular/angular/issues/23196)
+* **service-worker:** do not enter degraded mode when offline ([#22883](https://github.com/angular/angular/issues/22883)) ([ae9c25f](https://github.com/angular/angular/commit/ae9c25f)), closes [#21636](https://github.com/angular/angular/issues/21636)
+* **service-worker:** fix LruList bugs ([#22769](https://github.com/angular/angular/issues/22769)) ([65f8943](https://github.com/angular/angular/commit/65f8943)), closes [#22218](https://github.com/angular/angular/issues/22218) [#22768](https://github.com/angular/angular/issues/22768)
+* **service-worker:** ignore invalid `only-if-cached` requests ([#22883](https://github.com/angular/angular/issues/22883)) ([0d4fe38](https://github.com/angular/angular/commit/0d4fe38)), closes [#22362](https://github.com/angular/angular/issues/22362)
+* **upgrade:** correctly handle downgraded `OnPush` components ([#22209](https://github.com/angular/angular/issues/22209)) ([f43fba6](https://github.com/angular/angular/commit/f43fba6)), closes [#14286](https://github.com/angular/angular/issues/14286)
+* **upgrade:** propagate return value of resumeBootstrap ([#22754](https://github.com/angular/angular/issues/22754)) ([ae76eec](https://github.com/angular/angular/commit/ae76eec)), closes [#22723](https://github.com/angular/angular/issues/22723)
+* **upgrade:** two-way binding and listening for event ([#22772](https://github.com/angular/angular/issues/22772)) ([5391f96](https://github.com/angular/angular/commit/5391f96)), closes [#22734](https://github.com/angular/angular/issues/22734)
+
+
+
+<a name="5.2.9"></a>
+## [5.2.9](https://github.com/angular/angular/compare/5.2.8...5.2.9) (2018-03-14)
+
+
+### Bug Fixes
+
+* **platform-server:** add styles to elements correctly ([#22527](https://github.com/angular/angular/issues/22527)) ([fc6dfc2](https://github.com/angular/angular/commit/fc6dfc2))
+* **router:** correct over-encoding of URL fragment ([#22687](https://github.com/angular/angular/issues/22687)) ([86517f2](https://github.com/angular/angular/commit/86517f2))
+
+
+
+<a name="5.2.8"></a>
+## [5.2.8](https://github.com/angular/angular/compare/5.2.7...5.2.8) (2018-03-07)
+
+
+### Bug Fixes
+
+* **platform-server:** generate correct stylings for camel case names ([#22263](https://github.com/angular/angular/issues/22263)) ([de02a7a](https://github.com/angular/angular/commit/de02a7a)), closes [#19235](https://github.com/angular/angular/issues/19235)
+* **router:** don't mutate route configs ([#22358](https://github.com/angular/angular/issues/22358)) ([8f0a064](https://github.com/angular/angular/commit/8f0a064)), closes [#22203](https://github.com/angular/angular/issues/22203)
+* **router:** fix URL serialization so special characters are only encoded where needed ([#22337](https://github.com/angular/angular/issues/22337)) ([789a47e](https://github.com/angular/angular/commit/789a47e)), closes [#10280](https://github.com/angular/angular/issues/10280)
+* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([4aef9de](https://github.com/angular/angular/commit/4aef9de)), closes [#22392](https://github.com/angular/angular/issues/22392)
+* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([6638390](https://github.com/angular/angular/commit/6638390))
+* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([a9a0e27](https://github.com/angular/angular/commit/a9a0e27)), closes [#22175](https://github.com/angular/angular/issues/22175)
+
+
+
+<a name="5.2.7"></a>
+## [5.2.7](https://github.com/angular/angular/compare/5.2.6...5.2.7) (2018-02-28)
+
+
+### Bug Fixes
+
+* **platform-server:** generate correct stylings for camel case names ([#22263](https://github.com/angular/angular/issues/22263)) ([de02a7a](https://github.com/angular/angular/commit/de02a7a)), closes [#19235](https://github.com/angular/angular/issues/19235)
+* **router:** don't mutate route configs ([#22358](https://github.com/angular/angular/issues/22358)) ([8f0a064](https://github.com/angular/angular/commit/8f0a064)), closes [#22203](https://github.com/angular/angular/issues/22203)
+* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([4aef9de](https://github.com/angular/angular/commit/4aef9de)), closes [#22392](https://github.com/angular/angular/issues/22392)
+* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([6638390](https://github.com/angular/angular/commit/6638390))
+* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([a9a0e27](https://github.com/angular/angular/commit/a9a0e27)), closes [#22175](https://github.com/angular/angular/issues/22175)
+
+
+
+<a name="5.2.6"></a>
+## [5.2.6](https://github.com/angular/angular/compare/5.2.5...5.2.6) (2018-02-22)
+
+### Bug Fixes
+
+* **common:** correct mapping of Observable methods ([#20518](https://github.com/angular/angular/issues/20518)) ([ce5e8fa](https://github.com/angular/angular/commit/ce5e8fa)), closes [#20516](https://github.com/angular/angular/issues/20516)
+* **common:** then and else template might be set to null ([#22298](https://github.com/angular/angular/issues/22298)) ([af6a056](https://github.com/angular/angular/commit/af6a056))
+* **compiler-cli:** add missing entry point to package, update tsickle ([#22295](https://github.com/angular/angular/issues/22295)) ([c5418c7](https://github.com/angular/angular/commit/c5418c7))
+* **core:** properly handle function without prototype in reflector ([#22284](https://github.com/angular/angular/issues/22284)) ([5ec38f2](https://github.com/angular/angular/commit/5ec38f2)), closes [#19978](https://github.com/angular/angular/issues/19978)
+* **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([ee91de9](https://github.com/angular/angular/commit/ee91de9)), closes [#21731](https://github.com/angular/angular/issues/21731)
+
+<a name="5.2.5"></a>
+## [5.2.5](https://github.com/angular/angular/compare/5.2.4...5.2.5) (2018-02-14)
+
+### Bug Fixes
+
+* **aio:** update Firebase redirects and SW routes ([#21763](https://github.com/angular/angular/pull/21763)) ([#22104](https://github.com/angular/angular/pull/22104)) ([15ff7ba](https://github.com/angular/angular/commit/15ff7ba)), closes [#21377](https://github.com/angular/angular/issues/21377)
 * **bazel:** allow TS to read ambient typings ([#21876](https://github.com/angular/angular/issues/21876)) ([d57fd0b](https://github.com/angular/angular/commit/d57fd0b)), closes [#21872](https://github.com/angular/angular/issues/21872)
 * **bazel:** improve error message for missing assets ([#22096](https://github.com/angular/angular/issues/22096)) ([c5ec8d9](https://github.com/angular/angular/commit/c5ec8d9)), closes [#22095](https://github.com/angular/angular/issues/22095)
 * **common:** weaken AsyncPipe transform signature ([#22169](https://github.com/angular/angular/issues/22169)) ([c6bdc83](https://github.com/angular/angular/commit/c6bdc83))
 * **compiler:** make unary plus operator consistent to JavaScript ([#22154](https://github.com/angular/angular/issues/22154)) ([1b8ea10](https://github.com/angular/angular/commit/1b8ea10)), closes [#22089](https://github.com/angular/angular/issues/22089)
 * **core:** add stacktrace in log when error during cleanup component in TestBed ([#22162](https://github.com/angular/angular/issues/22162)) ([c4f841f](https://github.com/angular/angular/commit/c4f841f))
-* **core:** ensure initial value of QueryList length ([#21980](https://github.com/angular/angular/issues/21980)) ([#21982](https://github.com/angular/angular/issues/21982)) ([47b73fd](https://github.com/angular/angular/commit/47b73fd)), closes [/github.com/angular/angular/commit/e54474215629aa6a0e0497fe61bfc896cea532c9#diff-a85dbe0991a7577ea24b49374e9ae90](https://github.com//github.com/angular/angular/commit/e54474215629aa6a0e0497fe61bfc896cea532c9/issues/diff-a85dbe0991a7577ea24b49374e9ae90)
+* **core:** ensure initial value of QueryList length ([#21980](https://github.com/angular/angular/issues/21980)) ([#21982](https://github.com/angular/angular/issues/21982)) ([47b73fd](https://github.com/angular/angular/commit/47b73fd)), closes [#21980](https://github.com/angular/angular/issues/21980)
 * **core:** use appropriate inert document strategy for Firefox & Safari ([#17019](https://github.com/angular/angular/issues/17019)) ([47b71d9](https://github.com/angular/angular/commit/47b71d9))
 * **forms:** prevent event emission on enable/disable when emitEvent is false ([#12366](https://github.com/angular/angular/issues/12366)) ([#21018](https://github.com/angular/angular/issues/21018)) ([56b9591](https://github.com/angular/angular/commit/56b9591))
 * **language-service:** correct instructions to install the language service ([#22000](https://github.com/angular/angular/issues/22000)) ([0b23573](https://github.com/angular/angular/commit/0b23573))

CODE_OF_CONDUCT.md

@@ -0,0 +1,12 @@
+# Contributor Code of Conduct
+## Version 0.3b-angular
+
+As contributors and maintainers of the Angular project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.
+
+Communication through any of Angular's channels (GitHub, Gitter, IRC, mailing lists, Google+, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+
+We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Angular project to do the same.
+
+If any member of the community violates this code of conduct, the maintainers of the Angular project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.
+
+If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at [conduct@angular.io](mailto:conduct@angular.io).

CONTRIBUTING.md

@@ -51,7 +51,7 @@ and help you to craft the change so that it is successfully accepted into the pr
 
 Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.
 
-We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
+We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide a minimal reproduction scenario using http://plnkr.co. Having a live, reproducible scenario gives us a wealth of important information without going back & forth to you with additional questions like:
 
 - version of Angular used
 - 3rd-party libraries and their versions
@@ -61,7 +61,7 @@ A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm
 
 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.
+Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you we are going to close an issue that doesn't have enough info to be reproduced.
 
 You can file new issues by filling out our [new issue form](https://github.com/angular/angular/issues/new).
 
@@ -173,12 +173,12 @@ 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.
+The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
 
 Samples: (even more [samples](https://github.com/angular/angular/commits/master))
 
 ```
-docs(changelog): update change log to beta.5
+docs(changelog): update changelog to beta.5
 ```
 ```
 fix(release): need to depend on latest rxjs and zone.js
@@ -203,7 +203,7 @@ Must be one of the following:
 * **test**: Adding missing tests or correcting existing tests
 
 ### Scope
-The scope should be the name of the npm package affected (as perceived by person reading changelog generated from commit messages.
+The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.
 
 The following is the list of supported scopes:
 
@@ -232,10 +232,10 @@ There are currently a few exceptions to the "use package name" rule:
 * 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:
+The subject contains a succinct description of the change:
 
 * use the imperative, present tense: "change" not "changed" nor "changes"
-* don't capitalize first letter
+* don't capitalize the first letter
 * no dot (.) at the end
 
 ### Body
@@ -266,7 +266,7 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
   * https://help.github.com/articles/setting-your-commit-email-address-in-git/
   * https://stackoverflow.com/questions/37245303/what-does-usera-committed-with-userb-13-days-ago-on-github-mean
   * https://help.github.com/articles/about-commit-email-addresses/
-  * https://help.github.com/articles/blocking-command-line-pushes-that-expose-your-personal-email-address/ 
+  * https://help.github.com/articles/blocking-command-line-pushes-that-expose-your-personal-email-address/
 
   Note that if you have more than one Git identity, it is important to verify that you are logged in with the same ID with which you signed the CLA, before you commit changes. If not, your PR will fail the CLA check.  
 

WORKSPACE

@@ -1,11 +1,10 @@
 workspace(name = "angular")
 
-load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
-
-git_repository(
+http_archive(
     name = "build_bazel_rules_nodejs",
-    remote = "https://github.com/bazelbuild/rules_nodejs.git",
-    commit = "230d39a391226f51c03448f91eb61370e2e58c42",
+    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.5.0.zip",
+    strip_prefix = "rules_nodejs-0.5.0",
+    sha256 = "06aabb253c3867d51724386ac5622a0a238bbd82e2c70ce1d09ee3ceac4c31d6",
 )
 
 load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
@@ -13,10 +12,11 @@ load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_reposi
 check_bazel_version("0.9.0")
 node_repositories(package_json = ["//:package.json"])
 
-git_repository(
+http_archive(
     name = "build_bazel_rules_typescript",
-    remote = "https://github.com/bazelbuild/rules_typescript.git",
-    commit = "d3ad16d1f105e2490859da9ad528ba4c45991d09"
+    url = "https://github.com/bazelbuild/rules_typescript/archive/0.11.0.zip",
+    strip_prefix = "rules_typescript-0.11.0",
+    sha256 = "ce7bac7b5287d5162fcbe4f7c14ff507ae7d506ceb44626ad09f6b7e27d3260b",
 )
 
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
@@ -28,13 +28,16 @@ local_repository(
     path = "node_modules/rxjs/src",
 )
 
-git_repository(
+# This commit matches the version of buildifier in angular/ngcontainer
+# If you change this, also check if it matches the version in the angular/ngcontainer
+# version in /.circleci/config.yml
+BAZEL_BUILDTOOLS_VERSION = "b3b620e8bcff18ed3378cd3f35ebeb7016d71f71"
+
+http_archive(
     name = "com_github_bazelbuild_buildtools",
-    remote = "https://github.com/bazelbuild/buildtools.git",
-    # Note, this commit matches the version of buildifier in angular/ngcontainer
-    # If you change this, also check if it matches the version in the angular/ngcontainer
-    # version in /.circleci/config.yml
-    commit = "b3b620e8bcff18ed3378cd3f35ebeb7016d71f71",
+    url = "https://github.com/bazelbuild/buildtools/archive/%s.zip" % BAZEL_BUILDTOOLS_VERSION,
+    strip_prefix = "buildtools-%s" % BAZEL_BUILDTOOLS_VERSION,
+    sha256 = "dad19224258ed67cbdbae9b7befb785c3b966e5a33b04b3ce58ddb7824b97d73",
 )
 
 http_archive(

aio/.gitignore

@@ -30,6 +30,7 @@
 /connect.lock
 /coverage
 /libpeerconnection.log
+debug.log
 npm-debug.log
 testem.log
 /typings
@@ -45,4 +46,4 @@ protractor-results*.txt
 Thumbs.db
 
 # copied dependencies
-src/assets/js/lunr*
+src/assets/js/lunr*

aio/aio-builds-setup/dockerbuild/Dockerfile

@@ -19,8 +19,8 @@ ARG      AIO_DOMAIN_NAME=ngbuilds.io
 ARG TEST_AIO_DOMAIN_NAME=$AIO_DOMAIN_NAME.localhost
 ARG      AIO_GITHUB_ORGANIZATION=angular
 ARG TEST_AIO_GITHUB_ORGANIZATION=angular
-ARG      AIO_GITHUB_TEAM_SLUGS=angular-core,aio-contributors
-ARG TEST_AIO_GITHUB_TEAM_SLUGS=angular-core,aio-contributors
+ARG      AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
+ARG TEST_AIO_GITHUB_TEAM_SLUGS=team,aio-contributors
 ARG      AIO_NGINX_HOSTNAME=$AIO_DOMAIN_NAME
 ARG TEST_AIO_NGINX_HOSTNAME=$TEST_AIO_DOMAIN_NAME
 ARG      AIO_NGINX_PORT_HTTP=80

aio/aio-builds-setup/docs/vm-setup--set-up-secrets.md

@@ -9,7 +9,7 @@ Necessary secrets:
    - Used for:
      - Retrieving open PRs without rate-limiting.
      - Retrieving PR author.
-     - Retrieving members of the `angular-core` team.
+     - Retrieving members of the trusted GitHub teams.
      - Posting comments with preview links on PRs.
 
 2. `PREVIEW_DEPLOYMENT_TOKEN`

aio/content/examples/architecture/src/app/backend.service.ts

@@ -15,7 +15,7 @@ export class BackendService {
 
   getAll(type: Type<any>): PromiseLike<any[]> {
     if (type === Hero) {
-      // TODO get from the database
+      // TODO: get from the database
       return Promise.resolve<Hero[]>(HEROES);
     }
     let err = new Error('Cannot get object of this type');

aio/content/examples/cli-quickstart/src/app/app.component.html

@@ -1,20 +1,19 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
   <h1>
-    Welcome to {{title}}!!
+    Welcome to {{ title }}!
   </h1>
-  <img width="300" alt="Angular logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
+  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
 <h2>Here are some links to help you start: </h2>
 <ul>
   <li>
-    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
   </li>
   <li>
-    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
   </li>
   <li>
-    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
+    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
   </li>
 </ul>
-

aio/content/examples/cli-quickstart/src/app/app.component.spec.ts

@@ -1,7 +1,5 @@
 import { TestBed, async } from '@angular/core/testing';
-
 import { AppComponent } from './app.component';
-
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -20,13 +18,13 @@ describe('AppComponent', () => {
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
+    expect(app.title).toMatch(/app/i);
   }));
 
   it('should render title in a h1 tag', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
+    expect(compiled.querySelector('h1').textContent).toMatch(/app/i);
   }));
 });

aio/content/examples/cli-quickstart/src/app/app.component.ts

@@ -11,6 +11,6 @@ import { Component } from '@angular/core';
 // #enddocregion metadata
 // #docregion title, class
 export class AppComponent {
-  title = 'My First Angular App';
+  title = 'My First Angular App!';
 }
 // #enddocregion title, class

aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts

@@ -8,7 +8,7 @@ import { MinimalLogger }       from './minimal-logger.service';
 @Component({
   selector: 'app-hero-of-the-month',
   templateUrl: './hero-of-the-month.component.html',
-  // Todo: move this aliasing, `useExisting` provider to the AppModule
+  // TODO: move this aliasing, `useExisting` provider to the AppModule
   providers: [{ provide: MinimalLogger, useExisting: LoggerService }]
 })
 export class HeroOfTheMonthComponent {

aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts

@@ -5,7 +5,7 @@ import { Hero }       from './hero';
 @Injectable()
 export class HeroService {
 
-  // TODO move to database
+  // TODO: move to database
   private heroes: Array<Hero> = [
     new Hero(1, 'RubberMan', 'Hero of many talents', '123-456-7899'),
     new Hero(2, 'Magma', 'Hero of all trades', '555-555-5555'),

aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts

@@ -151,7 +151,7 @@ export class BethComponent implements Parent {
 // #docregion alex-1
 })
 // #enddocregion alex-1
-// Todo: Add `... implements Parent` to class signature
+// TODO: Add `... implements Parent` to class signature
 // #docregion alex-1
 // #docregion alex-class-signature
 export class AlexComponent extends Base

aio/content/examples/dependency-injection/src/app/user.service.ts

@@ -7,7 +7,7 @@ export class User {
     public isAuthorized = false) { }
 }
 
-// Todo: get the user; don't 'new' it.
+// TODO: get the user; don't 'new' it.
 let alice = new User('Alice', true);
 let bob = new User('Bob', false);
 

aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts

@@ -1,12 +1,12 @@
 // #docregion
-import { Component, Input, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
 
 import { AdDirective } from './ad.directive';
 import { AdItem }      from './ad-item';
 import { AdComponent } from './ad.component';
 
 @Component({
-  selector: 'app-add-banner',
+  selector: 'app-ad-banner',
   // #docregion ad-host
   template: `
               <div class="ad-banner">
@@ -17,16 +17,15 @@ import { AdComponent } from './ad.component';
   // #enddocregion ad-host
 })
 // #docregion class
-export class AdBannerComponent implements AfterViewInit, OnDestroy {
+export class AdBannerComponent implements OnInit, OnDestroy {
   @Input() ads: AdItem[];
-  currentAddIndex: number = -1;
+  currentAdIndex: number = -1;
   @ViewChild(AdDirective) adHost: AdDirective;
-  subscription: any;
   interval: any;
 
   constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
 
-  ngAfterViewInit() {
+  ngOnInit() {
     this.loadComponent();
     this.getAds();
   }
@@ -36,8 +35,8 @@ export class AdBannerComponent implements AfterViewInit, OnDestroy {
   }
 
   loadComponent() {
-    this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length;
-    let adItem = this.ads[this.currentAddIndex];
+    this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
+    let adItem = this.ads[this.currentAdIndex];
 
     let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
 

aio/content/examples/dynamic-component-loader/src/app/app.component.ts

@@ -8,7 +8,7 @@ import { AdItem }            from './ad-item';
   selector: 'app-root',
   template: `
     <div>
-      <app-add-banner [ads]="ads"></app-add-banner>
+      <app-ad-banner [ads]="ads"></app-ad-banner>
     </div>
   `
 })

aio/content/examples/dynamic-form/src/app/question.service.ts

@@ -8,8 +8,8 @@ import { TextboxQuestion }  from './question-textbox';
 @Injectable()
 export class QuestionService {
 
-  // Todo: get from a remote source of question metadata
-  // Todo: make asynchronous
+  // TODO: get from a remote source of question metadata
+  // TODO: make asynchronous
   getQuestions() {
 
     let questions: QuestionBase<any>[] = [

aio/content/examples/http/src/app/http-interceptors/upload-interceptor.ts

@@ -15,7 +15,7 @@ export class UploadInterceptor implements HttpInterceptor {
     if (req.url.indexOf('/upload/file') === -1) {
       return next.handle(req);
     }
-    const delay = 300; // Todo: inject delay?
+    const delay = 300; // TODO: inject delay?
     return createUploadEvents(delay);
   }
 }

aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts

@@ -43,6 +43,7 @@ export class PeekABooParentComponent {
       this.heroName = 'Windstorm';
       this.logger.clear(); // clear log on create
     }
+    this.hookLog = this.logger.logs;
     this.logger.tick();
   }
 

aio/content/examples/observables-in-angular/src/main.ts

@@ -0,0 +1,131 @@
+
+import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+// #docregion eventemitter
+
+@Component({
+  selector: 'zippy',
+  template: `
+  <div class="zippy">
+    <div (click)="toggle()">Toggle</div>
+    <div [hidden]="!visible">
+      <ng-content></ng-content>
+    </div>
+  </div>`})
+
+export class ZippyComponent {
+  visible = true;
+  @Output() open = new EventEmitter<any>();
+  @Output() close = new EventEmitter<any>();
+
+  toggle() {
+    this.visible = !this.visible;
+    if (this.visible) {
+      this.open.emit(null);
+    } else {
+      this.close.emit(null);
+    }
+  }
+}
+
+// #enddocregion eventemitter
+
+// #docregion pipe
+
+@Component({
+  selector: 'async-observable-pipe',
+  template: `<div><code>observable|async</code>:
+       Time: {{ time | async }}</div>`
+})
+export class AsyncObservablePipeComponent {
+  time = new Observable(observer =>
+    setInterval(() => observer.next(new Date().toString()), 1000)
+  );
+}
+
+// #enddocregion pipe
+
+// #docregion router
+
+import { Router, NavigationStart } from '@angular/router';
+import { filter } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-routable',
+  templateUrl: './routable.component.html',
+  styleUrls: ['./routable.component.css']
+})
+export class Routable1Component implements OnInit {
+
+  navStart: Observable<NavigationStart>;
+
+  constructor(private router: Router) {
+    // Create a new Observable the publishes only the NavigationStart event
+    this.navStart = router.events.pipe(
+      filter(evt => evt instanceof NavigationStart)
+    ) as Observable<NavigationStart>;
+  }
+
+  ngOnInit() {
+    this.navStart.subscribe(evt => console.log('Navigation Started!'));
+  }
+}
+
+// #enddocregion router
+
+
+// #docregion activated_route
+
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-routable',
+  templateUrl: './routable.component.html',
+  styleUrls: ['./routable.component.css']
+})
+export class Routable2Component implements OnInit {
+  constructor(private activatedRoute: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.activatedRoute.url
+      .subscribe(url => console.log('The URL changed to: ' + url));
+  }
+}
+
+// #enddocregion activated_route
+
+
+// #docregion forms
+
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'my-component',
+  template: 'MyComponent Template'
+})
+export class MyComponent implements OnInit {
+  nameChangeLog: string[] = [];
+  heroForm: FormGroup;
+
+  ngOnInit() {
+    this.logNameChange();
+  }
+  logNameChange() {
+    const nameControl = this.heroForm.get('name');
+    nameControl.valueChanges.forEach(
+      (value: string) => this.nameChangeLog.push(value)
+    );
+  }
+}
+
+// #enddocregion forms
+
+
+
+@NgModule({
+  declarations:
+      [ZippyComponent, AsyncObservablePipeComponent, Routable1Component, Routable2Component, MyComponent]
+})
+export class AppModule {
+}

aio/content/examples/observables/src/creating.ts

@@ -0,0 +1,66 @@
+
+import { Observable } from 'rxjs/Observable';
+
+// #docregion subscriber
+
+// This function runs when subscribe() is called
+function sequenceSubscriber(observer) {
+  // synchronously deliver 1, 2, and 3, then complete
+  observer.next(1);
+  observer.next(2);
+  observer.next(3);
+  observer.complete();
+
+  // unsubscribe function doesn't need to do anything in this
+  // because values are delivered synchronously
+  return {unsubscribe() {}};
+}
+
+// Create a new Observable that will deliver the above sequence
+const sequence = new Observable(sequenceSubscriber);
+
+// execute the Observable and print the result of each notification
+sequence.subscribe({
+  next(num) { console.log(num); },
+  complete() { console.log('Finished sequence'); }
+});
+
+// Logs:
+// 1
+// 2
+// 3
+// Finished sequence
+
+// #enddocregion subscriber
+
+// #docregion fromevent
+
+function fromEvent(target, eventName) {
+  return new Observable((observer) => {
+    const handler = (e) => observer.next(e);
+
+    // Add the event handler to the target
+    target.addEventListener(eventName, handler);
+
+    return () => {
+      // Detach the event handler from the target
+      target.removeEventListener(eventName, handler);
+    };
+  });
+}
+
+// #enddocregion fromevent
+
+// #docregion fromevent_use
+
+const ESC_KEY = 27;
+const nameInput = document.getElementById('name') as HTMLInputElement;
+
+const subscription = fromEvent(nameInput, 'keydown')
+  .subscribe((e: KeyboardEvent) => {
+    if (e.keyCode === ESC_KEY) {
+      nameInput.value = '';
+    }
+  });
+
+// #enddocregion fromevent_use

aio/content/examples/observables/src/geolocation.ts

@@ -0,0 +1,32 @@
+import { Observable } from 'rxjs/Observable';
+
+// #docregion
+
+// Create an Observable that will start listening to geolocation updates
+// when a consumer subscribes.
+const locations = new Observable((observer) => {
+  // Get the next and error callbacks. These will be passed in when
+  // the consumer subscribes.
+  const {next, error} = observer;
+  let watchId;
+
+  // Simple geolocation API check provides values to publish
+  if ('geolocation' in navigator) {
+    watchId = navigator.geolocation.watchPosition(next, error);
+  } else {
+    error('Geolocation not available');
+  }
+
+  // When the consumer unsubscribes, clean up data ready for next subscription.
+  return {unsubscribe() { navigator.geolocation.clearWatch(watchId); }};
+});
+
+// Call subscribe() to start listening for updates.
+const locationsSubscription = locations.subscribe({
+  next(position) { console.log('Current Position: ', position); },
+  error(msg) { console.log('Error Getting Location: ', msg); }
+});
+
+// Stop listening for location after 10 seconds
+setTimeout(() => { locationsSubscription.unsubscribe(); }, 10000);
+// #enddocregion

aio/content/examples/observables/src/main.ts

@@ -0,0 +1,5 @@
+
+import './geolocation';
+import './subscribing';
+import './creating';
+import './multicasting';

aio/content/examples/observables/src/multicasting.ts

@@ -0,0 +1,155 @@
+
+import { Observable } from 'rxjs/Observable';
+
+// #docregion delay_sequence
+
+function sequenceSubscriber(observer) {
+  const seq = [1, 2, 3];
+  let timeoutId;
+
+  // Will run through an array of numbers, emitting one value
+  // per second until it gets to the end of the array.
+  function doSequence(arr, idx) {
+    timeoutId = setTimeout(() => {
+      observer.next(arr[idx]);
+      if (idx === arr.length - 1) {
+        observer.complete();
+      } else {
+        doSequence(arr, idx++);
+      }
+    }, 1000);
+  }
+
+  doSequence(seq, 0);
+
+  // Unsubscribe should clear the timeout to stop execution
+  return {unsubscribe() {
+    clearTimeout(timeoutId);
+  }};
+}
+
+// Create a new Observable that will deliver the above sequence
+const sequence = new Observable(sequenceSubscriber);
+
+sequence.subscribe({
+  next(num) { console.log(num); },
+  complete() { console.log('Finished sequence'); }
+});
+
+// Logs:
+// (at 1 second): 1
+// (at 2 seconds): 2
+// (at 3 seconds): 3
+// (at 3 seconds): Finished sequence
+
+// #enddocregion delay_sequence
+
+// #docregion subscribe_twice
+
+// Subscribe starts the clock, and will emit after 1 second
+sequence.subscribe({
+  next(num) { console.log('1st subscribe: ' + num); },
+  complete() { console.log('1st sequence finished.'); }
+});
+
+// After 1/2 second, subscribe again.
+setTimeout(() => {
+  sequence.subscribe({
+    next(num) { console.log('2nd subscribe: ' + num); },
+    complete() { console.log('2nd sequence finished.'); }
+  });
+}, 500);
+
+// Logs:
+// (at 1 second): 1st subscribe: 1
+// (at 1.5 seconds): 2nd subscribe: 1
+// (at 2 seconds): 1st subscribe: 2
+// (at 2.5 seconds): 2nd subscribe: 2
+// (at 3 seconds): 1st subscribe: 3
+// (at 3 seconds): 1st sequence finished
+// (at 3.5 seconds): 2nd subscribe: 3
+// (at 3.5 seconds): 2nd sequence finished
+
+// #enddocregion subscribe_twice
+
+// #docregion multicast_sequence
+
+function multicastSequenceSubscriber() {
+  const seq = [1, 2, 3];
+  // Keep track of each observer (one for every active subscription)
+  const observers = [];
+  // Still a single timeoutId because there will only ever be one
+  // set of values being generated, multicasted to each subscriber
+  let timeoutId;
+
+  // Return the subscriber function (runs when subscribe()
+  // function is invoked)
+  return (observer) => {
+    observers.push(observer);
+    // When this is the first subscription, start the sequence
+    if (observers.length === 1) {
+      timeoutId = doSequence({
+        next(val) {
+          // Iterate through observers and notify all subscriptions
+          observers.forEach(obs => obs.next(val));
+        },
+        complete() {
+          // Notify all complete callbacks
+          observers.forEach(obs => obs.complete());
+        }
+      }, seq, 0);
+    }
+
+    return {
+      unsubscribe() {
+        // Remove from the observers array so it's no longer notified
+        observers.splice(observers.indexOf(observer), 1);
+        // If there's no more listeners, do cleanup
+        if (observers.length === 0) {
+          clearTimeout(timeoutId);
+        }
+      }
+    };
+  };
+}
+
+// Run through an array of numbers, emitting one value
+// per second until it gets to the end of the array.
+function doSequence(observer, arr, idx) {
+  return setTimeout(() => {
+    observer.next(arr[idx]);
+    if (idx === arr.length - 1) {
+      observer.complete();
+    } else {
+      doSequence(observer, arr, idx++);
+    }
+  }, 1000);
+}
+
+// Create a new Observable that will deliver the above sequence
+const multicastSequence = new Observable(multicastSequenceSubscriber);
+
+// Subscribe starts the clock, and begins to emit after 1 second
+multicastSequence.subscribe({
+  next(num) { console.log('1st subscribe: ' + num); },
+  complete() { console.log('1st sequence finished.'); }
+});
+
+// After 1 1/2 seconds, subscribe again (should "miss" the first value).
+setTimeout(() => {
+  multicastSequence.subscribe({
+    next(num) { console.log('2nd subscribe: ' + num); },
+    complete() { console.log('2nd sequence finished.'); }
+  });
+}, 1500);
+
+// Logs:
+// (at 1 second): 1st subscribe: 1
+// (at 2 seconds): 1st subscribe: 2
+// (at 2 seconds): 2nd subscribe: 2
+// (at 3 seconds): 1st subscribe: 3
+// (at 3 seconds): 1st sequence finished
+// (at 3 seconds): 2nd subscribe: 3
+// (at 3 seconds): 2nd sequence finished
+
+// #enddocregion multicast_sequence

aio/content/examples/observables/src/subscribing.ts

@@ -0,0 +1,33 @@
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+// #docregion observer
+
+// Create simple observable that emits three values
+const myObservable = Observable.of(1, 2, 3);
+
+// Create observer object
+const myObserver = {
+  next: x => console.log('Observer got a next value: ' + x),
+  error: err => console.error('Observer got an error: ' + err),
+  complete: () => console.log('Observer got a complete notification'),
+};
+
+// Execute with the observer object
+myObservable.subscribe(myObserver);
+// Logs:
+// Observer got a next value: 1
+// Observer got a next value: 2
+// Observer got a next value: 3
+// Observer got a complete notification
+
+// #enddocregion observer
+
+// #docregion sub_fn
+myObservable.subscribe(
+  x => console.log('Observer got a next value: ' + x),
+  err => console.error('Observer got an error: ' + err),
+  () => console.log('Observer got a complete notification')
+);
+// #enddocregion sub_fn

aio/content/examples/practical-observable-usage/src/backoff.ts

@@ -0,0 +1,26 @@
+
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { range } from 'rxjs/observable/range';
+import { timer } from 'rxjs/observable/timer';
+import { pipe } from 'rxjs/util/pipe';
+import { retryWhen, zip, map, mergeMap } from 'rxjs/operators';
+
+function backoff(maxTries, ms) {
+ return pipe(
+   retryWhen(attempts => range(1, maxTries)
+     .pipe(
+       zip(attempts, (i) => i),
+       map(i => i * i),
+       mergeMap(i =>  timer(i * ms))
+     )
+   )
+ );
+}
+
+ajax('/api/endpoint')
+  .pipe(backoff(3, 250))
+  .subscribe(data => handleData(data));
+
+function handleData(data) {
+  // ...
+}

aio/content/examples/practical-observable-usage/src/typeahead.ts

@@ -0,0 +1,18 @@
+
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+
+const searchBox = document.getElementById('search-box');
+
+const typeahead = fromEvent(searchBox, 'input').pipe(
+  map((e: KeyboardEvent) => e.target.value),
+  filter(text => text.length > 2),
+  debounceTime(10),
+  distinctUntilChanged(),
+  switchMap(() => ajax('/api/endpoint'))
+);
+
+typeahead.subscribe(data => {
+ // Handle the data from the API
+});

aio/content/examples/reactive-forms/src/app/app.module.ts

@@ -6,32 +6,38 @@ import { BrowserModule }       from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import module
 
 import { AppComponent }        from './app.component';
-import { HeroDetailComponent } from './hero-detail/hero-detail.component'; // <-- #1 import component
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 // #enddocregion v1
+// #docregion hero-service-list
+// add JavaScript imports
 import { HeroListComponent }   from './hero-list/hero-list.component';
-
-import { HeroService }         from './hero.service'; //  <-- #1 import service
+import { HeroService }         from './hero.service';
 // #docregion v1
 
 @NgModule({
-  imports: [
-    BrowserModule,
-    ReactiveFormsModule // <-- #2 add to @NgModule imports
-  ],
   declarations: [
     AppComponent,
     HeroDetailComponent,
 // #enddocregion v1
-    HeroListComponent
+    HeroListComponent // <--declare HeroListComponent
 // #docregion v1
   ],
-// #enddocregion v1
-  exports: [ // export for the DemoModule
+ // #enddocregion hero-service-list
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule // <-- #2 add to @NgModule imports
+  ],
+  // #enddocregion v1
+  // export for the DemoModule
+  // #docregion hero-service-list
+  // ...
+  exports: [
     AppComponent,
     HeroDetailComponent,
-    HeroListComponent
+    HeroListComponent // <-- export HeroListComponent
   ],
-  providers: [ HeroService ], // <-- #4 provide HeroService
+  providers: [ HeroService ], // <-- provide HeroService
+// #enddocregion hero-service-list
 // #docregion v1
   bootstrap: [ AppComponent ]
 })

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html

@@ -1,7 +1,7 @@
 <!-- #docregion basic-form-->
 <h2>Hero Detail</h2>
 <h3><i>FormControl in a FormGroup</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html

@@ -1,7 +1,7 @@
 <!-- #docregion basic-form-->
 <h2>Hero Detail</h2>
 <h3><i>A FormGroup with a single FormControl using FormBuilder</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">
@@ -13,4 +13,4 @@
 <!-- #docregion form-value-json -->
 <p>Form value: {{ heroForm.value | json }}</p>
 <p>Form status: {{ heroForm.status | json }}</p>
-<!-- #enddocregion form-value-json  -->
+<!-- #enddocregion form-value-json -->

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html

@@ -1,7 +1,7 @@
 <!-- #docregion -->
 <h2>Hero Detail</h2>
 <h3><i>A FormGroup with multiple FormControls</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html

@@ -1,5 +1,5 @@
 
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
     <div class="form-group">
       <label class="center-block">Name:
         <input class="form-control" formControlName="name">

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html

@@ -1,7 +1,7 @@
 <!-- #docregion -->
 <h2>Hero Detail</h2>
 <h3><i>PatchValue to initialize a value</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts

@@ -44,7 +44,13 @@ export class HeroDetailComponent6 implements OnChanges {
   }
 
   // #docregion patch-value-on-changes
-  ngOnChanges() { // <-- wrap patchValue in ngOnChanges
+  ngOnChanges() { // <-- call rebuildForm in ngOnChanges
+    this.rebuildForm();
+  }
+  // #enddocregion patch-value-on-changes
+
+  // #docregion patch-value-rebuildform
+  rebuildForm() { // <-- wrap patchValue in rebuildForm
     this.heroForm.reset();
     // #docregion patch-value
     this.heroForm.patchValue({
@@ -52,7 +58,9 @@ export class HeroDetailComponent6 implements OnChanges {
     });
     // #enddocregion patch-value
   }
-  // #enddocregion patch-value-on-changes
+  // #enddocregion patch-value-rebuildform
 }
 
+
+
 // #enddocregion v6

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html

@@ -1,7 +1,7 @@
 <!-- #docregion -->
 <h2>Hero Detail</h2>
 <h3><i>A FormGroup with multiple FormControls</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts

@@ -38,32 +38,31 @@ export class HeroDetailComponent7 implements OnChanges {
 
   // #docregion ngOnChanges
   ngOnChanges() {
+    this.rebuildForm();
+  }
+   // #enddocregion ngOnChanges
+
+    // #docregion rebuildForm
+  rebuildForm() {
     this.heroForm.reset({
       name: this.hero.name,
-      address: this.hero.addresses[0] || new Address()
-    });
-  }
-  // #enddocregion ngOnChanges
-
-  /* First version of ngOnChanges
-  // #docregion ngOnChanges-1
-  ngOnChanges()
-  // #enddocregion ngOnChanges-1
-  */
-  ngOnChanges1() {
-    // #docregion reset
-    this.heroForm.reset();
-    // #enddocregion reset
-    // #docregion ngOnChanges-1
-    // #docregion set-value
-    this.heroForm.setValue({
-      name:    this.hero.name,
       // #docregion set-value-address
       address: this.hero.addresses[0] || new Address()
       // #enddocregion set-value-address
     });
+  }
+  // #enddocregion rebuildForm
+
+  /* First version of rebuildForm */
+  rebuildForm1() {
+    // #docregion reset
+    this.heroForm.reset();
+     // #enddocregion reset
+     // #docregion set-value
+     this.heroForm.setValue({
+      name:    this.hero.name,
+      address: this.hero.addresses[0] || new Address()
+   });
     // #enddocregion set-value
   }
-  // #enddocregion ngOnChanges-1
 }
-

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html

@@ -1,7 +1,7 @@
 <!-- #docplaster-->
 <h3><i>Using FormArray to add groups</i></h3>
 
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
     <p>Form Changed: {{ heroForm.dirty }}</p>
 
     <div class="form-group">
@@ -11,7 +11,9 @@
     </div>
     <!-- #docregion form-array-->
     <!-- #docregion form-array-skeleton -->
+    <!-- #docregion form-array-name -->
     <div formArrayName="secretLairs" class="well well-lg">
+    <!-- #enddocregion form-array-name -->
       <div *ngFor="let address of secretLairs.controls; let i=index" [formGroupName]="i" >
         <!-- The repeated address template -->
     <!-- #enddocregion form-array-skeleton -->

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts

@@ -39,12 +39,18 @@ export class HeroDetailComponent8 implements OnChanges {
 
   // #docregion onchanges
   ngOnChanges() {
+    this.rebuildForm();
+  }
+  // #enddocregion onchanges
+
+  // #docregion rebuildform
+  rebuildForm() {
     this.heroForm.reset({
       name: this.hero.name
     });
     this.setAddresses(this.hero.addresses);
   }
-  // #enddocregion onchanges
+// #enddocregion rebuildform
 
   // #docregion get-secret-lairs
   get secretLairs(): FormArray {

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html

@@ -1,11 +1,11 @@
 <!-- #docplaster -->
 <!-- #docregion -->
   <!-- #docregion buttons -->
-<form [formGroup]="heroForm" (ngSubmit)="onSubmit()" novalidate>
+<form [formGroup]="heroForm" (ngSubmit)="onSubmit()">
   <div style="margin-bottom: 1em">
     <button type="submit"
             [disabled]="heroForm.pristine" class="btn btn-success">Save</button> &nbsp;
-    <button type="reset" (click)="revert()"
+    <button type="button" (click)="revert()"
             [disabled]="heroForm.pristine" class="btn btn-danger">Revert</button>
   </div>
 

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts

@@ -13,7 +13,10 @@ import { HeroService }           from '../hero.service';
   templateUrl: './hero-detail.component.html',
   styleUrls: ['./hero-detail.component.css']
 })
+
+// #docregion onchanges-implementation
 export class HeroDetailComponent implements OnChanges {
+// #enddocregion onchanges-implementation
   @Input() hero: Hero;
 
   heroForm: FormGroup;
@@ -42,6 +45,10 @@ export class HeroDetailComponent implements OnChanges {
   }
 
   ngOnChanges() {
+    this.rebuildForm();
+  }
+
+  rebuildForm() {
     this.heroForm.reset({
       name: this.hero.name
     });
@@ -66,7 +73,7 @@ export class HeroDetailComponent implements OnChanges {
   onSubmit() {
     this.hero = this.prepareSaveHero();
     this.heroService.updateHero(this.hero).subscribe(/* error handling */);
-    this.ngOnChanges();
+    this.rebuildForm();
   }
   // #enddocregion on-submit
 
@@ -92,7 +99,7 @@ export class HeroDetailComponent implements OnChanges {
   // #enddocregion prepare-save-hero
 
   // #docregion revert
-  revert() { this.ngOnChanges(); }
+  revert() { this.rebuildForm(); }
   // #enddocregion revert
 
   // #docregion log-name-change

aio/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts

@@ -23,7 +23,7 @@ export class HeroListComponent implements OnInit {
   getHeroes() {
     this.isLoading = true;
     this.heroes = this.heroService.getHeroes()
-                      // Todo: error handling
+                      // TODO: error handling
                       .finally(() => this.isLoading = false);
     this.selectedHero = undefined;
   }

aio/content/examples/router/src/app/heroes/hero-list.component.1.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-// TODO SOMEDAY: Feature Componetized like HeroCenter
+// TODO: Feature Componetized like HeroCenter
 import { Component, OnInit }   from '@angular/core';
 import { Router }              from '@angular/router';
 import { Observable }          from 'rxjs/Observable';

aio/content/examples/router/src/app/heroes/hero-list.component.ts

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-// TODO SOMEDAY: Feature Componetized like CrisisCenter
+// TODO: Feature Componetized like CrisisCenter
 // #docregion rxjs-imports
 import 'rxjs/add/operator/switchMap';
 import { Observable } from 'rxjs/Observable';

aio/content/examples/rx-library/src/error-handling.ts

@@ -0,0 +1,26 @@
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+// #docregion
+
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { map, catchError } from 'rxjs/operators';
+// Return "response" from the API. If an error happens,
+// return an empty array.
+const apiData = ajax('/api/data').pipe(
+  map(res => {
+    if (!res.response) {
+      throw new Error('Value expected!');
+    }
+    return res.response;
+  }),
+  catchError(err => Observable.of([]))
+);
+
+apiData.subscribe({
+  next(x) { console.log('data: ', x); },
+  error(err) { console.log('errors already caught... will not run'); }
+});
+
+// #enddocregion

aio/content/examples/rx-library/src/naming-convention.ts

@@ -0,0 +1,20 @@
+
+
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'app-stopwatch',
+  templateUrl: './stopwatch.component.html'
+})
+export class StopwatchComponent {
+
+  stopwatchValue: number;
+  stopwatchValue$: Observable<number>;
+
+  start() {
+    this.stopwatchValue$.subscribe(num =>
+      this.stopwatchValue = num
+    );
+  }
+}

aio/content/examples/rx-library/src/operators.1.ts

@@ -0,0 +1,25 @@
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+// #docregion
+
+import { pipe } from 'rxjs/util/pipe';
+import { filter, map } from 'rxjs/operators';
+
+const nums = Observable.of(1, 2, 3, 4, 5);
+
+// Create a function that accepts an Observable.
+const squareOddVals = pipe(
+  filter(n => n % 2),
+  map(n => n * n)
+);
+
+// Create an Observable that will run the filter and map functions
+const squareOdd = squareOddVals(nums);
+
+// Suscribe to run the combined functions
+squareOdd.subscribe(x => console.log(x));
+
+// #enddocregion
+
+

aio/content/examples/rx-library/src/operators.2.ts

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+// #docregion
+
+import { filter } from 'rxjs/operators/filter';
+import { map } from 'rxjs/operators/map';
+
+const squareOdd = Observable.of(1, 2, 3, 4, 5)
+  .pipe(
+    filter(n => n % 2 !== 0),
+    map(n => n * n)
+  );
+
+// Subscribe to get values
+squareOdd.subscribe(x => console.log(x));
+
+// #enddocregion

aio/content/examples/rx-library/src/operators.ts

@@ -0,0 +1,21 @@
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+// #docregion
+
+import { map } from 'rxjs/operators';
+
+const nums = Observable.of(1, 2, 3);
+
+const squareValues = map((val: number) => val * val);
+const squaredNums = squareValues(nums);
+
+squaredNums.subscribe(x => console.log(x));
+
+// Logs
+// 1
+// 4
+// 9
+
+// #enddocregion

aio/content/examples/rx-library/src/retry-on-error.ts

@@ -0,0 +1,27 @@
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+
+// #docregion
+
+import { ajax } from 'rxjs/observable/dom/ajax';
+import { map, retry, catchError } from 'rxjs/operators';
+
+const apiData = ajax('/api/data').pipe(
+  retry(3), // Retry up to 3 times before failing
+  map(res => {
+    if (!res.response) {
+      throw new Error('Value expected!');
+    }
+    return res.response;
+  }),
+  catchError(err => Observable.of([]))
+);
+
+apiData.subscribe({
+  next(x) { console.log('data: ', x); },
+  error(err) { console.log('errors already caught... will not run'); }
+});
+
+// #enddocregion

aio/content/examples/rx-library/src/simple-creation.ts

@@ -0,0 +1,65 @@
+
+// #docregion promise
+
+import { fromPromise } from 'rxjs/observable/fromPromise';
+
+// Create an Observable out of a promise
+const data = fromPromise(fetch('/api/endpoint'));
+// Subscribe to begin listening for async result
+data.subscribe({
+ next(response) { console.log(response); },
+ error(err) { console.error('Error: ' + err); },
+ complete() { console.log('Completed'); }
+});
+
+// #enddocregion promise
+
+// #docregion interval
+
+import { interval } from 'rxjs/observable/interval';
+
+// Create an Observable that will publish a value on an interval
+const secondsCounter = interval(1000);
+// Subscribe to begin publishing values
+secondsCounter.subscribe(n =>
+  console.log(`It's been ${n} seconds since subscribing!`));
+
+// #enddocregion interval
+
+
+// #docregion event
+
+import { fromEvent } from 'rxjs/observable/fromEvent';
+
+const el = document.getElementById('my-element');
+
+// Create an Observable that will publish mouse movements
+const mouseMoves = fromEvent(el, 'mousemove');
+
+// Subscribe to start listening for mouse-move events
+const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
+  // Log coords of mouse movements
+  console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
+
+  // When the mouse is over the upper-left of the screen,
+  // unsubscribe to stop listening for mouse movements
+  if (evt.clientX < 40 && evt.clientY < 40) {
+    subscription.unsubscribe();
+  }
+});
+
+// #enddocregion event
+
+
+// #docregion ajax
+
+import { ajax } from 'rxjs/observable/dom/ajax';
+
+// Create an Observable that will create an AJAX request
+const apiData = ajax('/api/data');
+// Subscribe to create the request
+apiData.subscribe(res => console.log(res.status, res.response));
+
+// #enddocregion ajax
+
+

aio/content/examples/testing/specs.stackblitz.json

@@ -1,5 +1,5 @@
 {
-  "description": "Testing - app.specs",
+  "description": "Testing - specs",
   "files":[
     "src/styles.css",
 

aio/content/examples/testing/src/app/1st.spec.ts

@@ -1,5 +0,0 @@
-// #docplaster
-// #docregion
-describe('1st tests', () => {
-  it('true is true', () => expect(true).toBe(true));
-});

aio/content/examples/testing/src/app/about/about.component.spec.ts

@@ -1,9 +1,8 @@
 import { NO_ERRORS_SCHEMA }          from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By }                        from '@angular/platform-browser';
 
 import { AboutComponent }     from './about.component';
-import { HighlightDirective } from './shared/highlight.directive';
+import { HighlightDirective } from '../shared/highlight.directive';
 
 let fixture: ComponentFixture<AboutComponent>;
 
@@ -19,8 +18,8 @@ describe('AboutComponent (highlightDirective)', () => {
   });
 
   it('should have skyblue <h2>', () => {
-    const de = fixture.debugElement.query(By.css('h2'));
-    const bgColor = de.nativeElement.style.backgroundColor;
+    const h2: HTMLElement = fixture.nativeElement.querySelector('h2');
+    const bgColor = h2.style.backgroundColor;
     expect(bgColor).toBe('skyblue');
   });
   // #enddocregion tests

aio/content/examples/testing/src/app/about/about.component.ts

@@ -3,7 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   template: `
   <h2 highlight="skyblue">About</h2>
+  <h3>Quote of the day:</h3>
   <twain-quote></twain-quote>
-  <p>All about this sample</p>`
+  `
 })
 export class AboutComponent { }

aio/content/examples/testing/src/app/app-initial.component.spec.ts

@@ -0,0 +1,76 @@
+// #docplaster
+// #docregion
+import { TestBed, async } from '@angular/core/testing';
+// #enddocregion
+import { AppComponent } from './app-initial.component';
+/*
+// #docregion
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+// #enddocregion
+*/
+describe('AppComponent (initial CLI version)', () => {
+  // #docregion
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});
+// #enddocregion
+
+/// As it should be
+import { DebugElement } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+
+describe('AppComponent (initial CLI version - as it should be)', () => {
+
+  let app: AppComponent;
+  let de: DebugElement;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+
+    fixture = TestBed.createComponent(AppComponent);
+    app = fixture.componentInstance;
+    de = fixture.debugElement;
+  });
+
+  it('should create the app', () => {
+    expect(app).toBeDefined();
+  });
+
+  it(`should have as title 'app'`, () => {
+    expect(app.title).toEqual('app');
+  });
+
+  it('should render title in an h1 tag', () => {
+    fixture.detectChanges();
+    expect(de.nativeElement.querySelector('h1').textContent)
+      .toContain('Welcome to app!');
+  });
+});

aio/content/examples/testing/src/app/app-initial.component.ts

@@ -0,0 +1,11 @@
+// #docregion
+// Reduced version of the initial AppComponent generated by CLI
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: '<h1>Welcome to {{title}}!</h1>'
+})
+export class AppComponent {
+  title = 'app';
+}

aio/content/examples/testing/src/app/app-routing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule }       from '@angular/core';
 import { RouterModule }   from '@angular/router';
 
-import { AboutComponent } from './about.component';
+import { AboutComponent } from './about/about.component';
 
 @NgModule({
   imports: [

aio/content/examples/testing/src/app/app.component.html

@@ -1,11 +1,11 @@
 <!-- #docregion -->
 <app-banner></app-banner>
 <app-welcome></app-welcome>
-
+<!-- #docregion links -->
 <nav>
   <a routerLink="/dashboard">Dashboard</a>
   <a routerLink="/heroes">Heroes</a>
   <a routerLink="/about">About</a>
 </nav>
-
+<!-- #enddocregion links -->
 <router-outlet></router-outlet>

aio/content/examples/testing/src/app/app.component.router.spec.ts

@@ -4,11 +4,11 @@
 import { async, ComponentFixture, fakeAsync, TestBed, tick,
 } from '@angular/core/testing';
 
+import { asyncData } from '../testing';
+
 import { RouterTestingModule } from '@angular/router/testing';
 import { SpyLocation }         from '@angular/common/testing';
 
-import { click }               from '../testing';
-
 // r - for relatively obscure router symbols
 import * as r                         from  '@angular/router';
 import { Router, RouterLinkWithHref } from '@angular/router';
@@ -17,11 +17,15 @@ import { By }                 from '@angular/platform-browser';
 import { DebugElement, Type } from '@angular/core';
 import { Location }           from '@angular/common';
 
+import { click }              from '../testing';
+
 import { AppModule }          from './app.module';
 import { AppComponent }       from './app.component';
-import { AboutComponent }     from './about.component';
+import { AboutComponent }     from './about/about.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { TwainService }       from './shared/twain.service';
+import { TwainService }       from './twain/twain.service';
+
+import { HeroService, TestHeroService } from './model/testing/test-hero.service';
 
 let comp:     AppComponent;
 let fixture:  ComponentFixture<AppComponent>;
@@ -31,15 +35,19 @@ let location: SpyLocation;
 
 describe('AppComponent & RouterTestingModule', () => {
 
-  beforeEach( async(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [ AppModule, RouterTestingModule ]
+      imports: [ AppModule, RouterTestingModule ],
+      providers: [
+        { provide: HeroService, useClass: TestHeroService }
+      ]
     })
     .compileComponents();
   }));
 
   it('should navigate to "Dashboard" immediately', fakeAsync(() => {
     createComponent();
+    tick(); // wait for async data to arrive
     expect(location.path()).toEqual('/dashboard', 'after initialNavigation()');
     expectElementOf(DashboardComponent);
   }));
@@ -64,7 +72,7 @@ describe('AppComponent & RouterTestingModule', () => {
   }));
 
   // Can't navigate to lazy loaded modules with this technique
-  xit('should navigate to "Heroes" on click', fakeAsync(() => {
+  xit('should navigate to "Heroes" on click (not working yet)', fakeAsync(() => {
     createComponent();
     page.heroesLinkDe.nativeElement.click();
     advance();
@@ -84,9 +92,9 @@ import { HeroListComponent }      from './hero/hero-list.component';
 let loader: SpyNgModuleFactoryLoader;
 
 ///////// Can't get lazy loaded Heroes to work yet
-xdescribe('AppComponent & Lazy Loading', () => {
+xdescribe('AppComponent & Lazy Loading (not working yet)', () => {
 
-  beforeEach( async(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [ AppModule, RouterTestingModule ]
     })
@@ -95,14 +103,11 @@ xdescribe('AppComponent & Lazy Loading', () => {
 
   beforeEach(fakeAsync(() => {
     createComponent();
-    loader   = TestBed.get(NgModuleFactoryLoader);
-    loader.stubbedModules = {expected: HeroModule};
+    loader = TestBed.get(NgModuleFactoryLoader);
+    loader.stubbedModules = { expected: HeroModule };
     router.resetConfig([{path: 'heroes', loadChildren: 'expected'}]);
   }));
 
-  it('dummy', () => expect(true).toBe(true) );
-
-
   it('should navigate to "Heroes" on click', async(() => {
     page.heroesLinkDe.nativeElement.click();
     advance();
@@ -110,25 +115,24 @@ xdescribe('AppComponent & Lazy Loading', () => {
     expectElementOf(HeroListComponent);
   }));
 
-  xit('can navigate to "Heroes" w/ browser location URL change', fakeAsync(() => {
+  it('can navigate to "Heroes" w/ browser location URL change', fakeAsync(() => {
     location.go('/heroes');
     advance();
     expectPathToBe('/heroes');
     expectElementOf(HeroListComponent);
-
-    page.expectEvents([
-      [r.NavigationStart, '/heroes'], [r.RoutesRecognized, '/heroes'],
-      [r.NavigationEnd, '/heroes']
-    ]);
   }));
 });
 
 ////// Helpers /////////
 
-/** Wait a tick, then detect changes */
+/**
+ * Advance to the routed page
+ * Wait a tick, then detect changes, and tick again
+ */
 function advance(): void {
-  tick();
-  fixture.detectChanges();
+  tick(); // wait while navigating
+  fixture.detectChanges(); // update view
+  tick(); // wait for async data to arrive
 }
 
 function createComponent() {
@@ -140,8 +144,8 @@ function createComponent() {
   router = injector.get(Router);
   router.initialNavigation();
   spyOn(injector.get(TwainService), 'getQuote')
-    .and.returnValue(Promise.resolve('Test Quote')); // fakes it
-
+    // fake fast async observable
+    .and.returnValue(asyncData('Test Quote'));
   advance();
 
   page = new Page();
@@ -151,7 +155,6 @@ class Page {
   aboutLinkDe:     DebugElement;
   dashboardLinkDe: DebugElement;
   heroesLinkDe:    DebugElement;
-  recordedEvents:  any[]  =  [];
 
   // for debugging
   comp: AppComponent;
@@ -159,17 +162,7 @@ class Page {
   router: Router;
   fixture: ComponentFixture<AppComponent>;
 
-  expectEvents(pairs: any[]) {
-    const events = this.recordedEvents;
-    expect(events.length).toEqual(pairs.length, 'actual/expected events length mismatch');
-    for (let i = 0; i < events.length; ++i) {
-      expect((<any>events[i].constructor).name).toBe(pairs[i][0].name, 'unexpected event name');
-      expect((<any>events[i]).url).toBe(pairs[i][1], 'unexpected event url');
-    }
-  }
-
   constructor() {
-    router.events.subscribe(e => this.recordedEvents.push(e));
     const links = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
     this.aboutLinkDe     = links[2];
     this.dashboardLinkDe = links[0];

aio/content/examples/testing/src/app/app.component.spec.ts

@@ -1,69 +1,67 @@
 // #docplaster
-import { async, ComponentFixture, TestBed
-} from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DebugElement } from '@angular/core';
+import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
-  // #docregion setup-schemas
-  import { NO_ERRORS_SCHEMA }          from '@angular/core';
-  // #enddocregion setup-schemas
-  // #docregion setup-stubs-w-imports
-  import { Component }                 from '@angular/core';
-  // #docregion setup-schemas
-  import { AppComponent }              from './app.component';
-  // #enddocregion setup-schemas
-  import { BannerComponent }           from './banner.component';
-  import { RouterLinkStubDirective }   from '../testing';
-  // #docregion setup-schemas
-  import { RouterOutletStubComponent } from '../testing';
+import { AppComponent } from './app.component';
+import { RouterLinkDirectiveStub } from '../testing';
 
-  // #enddocregion setup-schemas
-  @Component({selector: 'app-welcome', template: ''})
-  class WelcomeStubComponent {}
+// #docregion component-stubs
+@Component({selector: 'app-banner', template: ''})
+class BannerStubComponent {}
 
-  // #enddocregion setup-stubs-w-imports
+@Component({selector: 'router-outlet', template: ''})
+class RouterOutletStubComponent { }
+
+@Component({selector: 'app-welcome', template: ''})
+class WelcomeStubComponent {}
+// #enddocregion component-stubs
 
 let comp:    AppComponent;
 let fixture: ComponentFixture<AppComponent>;
 
 describe('AppComponent & TestModule', () => {
-  // #docregion setup-stubs, setup-stubs-w-imports
-  beforeEach( async(() => {
+  beforeEach(async(() => {
+    // #docregion testbed-stubs
     TestBed.configureTestingModule({
       declarations: [
         AppComponent,
-        BannerComponent, WelcomeStubComponent,
-        RouterLinkStubDirective, RouterOutletStubComponent
+        RouterLinkDirectiveStub,
+        BannerStubComponent,
+        RouterOutletStubComponent,
+        WelcomeStubComponent
       ]
     })
-
-    .compileComponents()
-    .then(() => {
+    // #enddocregion testbed-stubs
+    .compileComponents().then(() => {
       fixture = TestBed.createComponent(AppComponent);
       comp    = fixture.componentInstance;
     });
   }));
-  // #enddocregion setup-stubs, setup-stubs-w-imports
   tests();
 });
 
 //////// Testing w/ NO_ERRORS_SCHEMA //////
 describe('AppComponent & NO_ERRORS_SCHEMA', () => {
-  // #docregion setup-schemas
-  beforeEach( async(() => {
+  beforeEach(async(() => {
+    // #docregion no-errors-schema, mixed-setup
     TestBed.configureTestingModule({
-      declarations: [ AppComponent, RouterLinkStubDirective ],
-      schemas:      [ NO_ERRORS_SCHEMA ]
+      declarations: [
+        AppComponent,
+        // #enddocregion no-errors-schema
+        BannerStubComponent,
+        // #docregion no-errors-schema
+        RouterLinkDirectiveStub
+      ],
+      schemas: [ NO_ERRORS_SCHEMA ]
     })
-
-    .compileComponents()
-    .then(() => {
+    // #enddocregion no-errors-schema, mixed-setup
+    .compileComponents().then(() => {
       fixture = TestBed.createComponent(AppComponent);
       comp    = fixture.componentInstance;
     });
   }));
-  // #enddocregion setup-schemas
   tests();
 });
 
@@ -75,7 +73,7 @@ import { AppRoutingModule } from './app-routing.module';
 
 describe('AppComponent & AppModule', () => {
 
-  beforeEach( async(() => {
+  beforeEach(async(() => {
 
     TestBed.configureTestingModule({
       imports: [ AppModule ]
@@ -88,7 +86,7 @@ describe('AppComponent & AppModule', () => {
         imports: [ AppRoutingModule ]
       },
       add: {
-        declarations: [ RouterLinkStubDirective, RouterOutletStubComponent ]
+        declarations: [ RouterLinkDirectiveStub, RouterOutletStubComponent ]
       }
     })
 
@@ -104,40 +102,40 @@ describe('AppComponent & AppModule', () => {
 });
 
 function tests() {
-  let links: RouterLinkStubDirective[];
+  let routerLinks: RouterLinkDirectiveStub[];
   let linkDes: DebugElement[];
 
   // #docregion test-setup
   beforeEach(() => {
-    // trigger initial data binding
-    fixture.detectChanges();
+    fixture.detectChanges(); // trigger initial data binding
 
     // find DebugElements with an attached RouterLinkStubDirective
     linkDes = fixture.debugElement
-      .queryAll(By.directive(RouterLinkStubDirective));
+      .queryAll(By.directive(RouterLinkDirectiveStub));
 
-    // get the attached link directive instances using the DebugElement injectors
-    links = linkDes
-      .map(de => de.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);
+    // get attached link directive instances
+    // using each DebugElement's injector
+    routerLinks = linkDes.map(de => de.injector.get(RouterLinkDirectiveStub));
   });
   // #enddocregion test-setup
 
-  it('can instantiate it', () => {
+  it('can instantiate the component', () => {
     expect(comp).not.toBeNull();
   });
 
   // #docregion tests
   it('can get RouterLinks from template', () => {
-    expect(links.length).toBe(3, 'should have 3 links');
-    expect(links[0].linkParams).toBe('/dashboard', '1st link should go to Dashboard');
-    expect(links[1].linkParams).toBe('/heroes', '2nd link should go to Heroes');
+    expect(routerLinks.length).toBe(3, 'should have 3 routerLinks');
+    expect(routerLinks[0].linkParams).toBe('/dashboard');
+    expect(routerLinks[1].linkParams).toBe('/heroes');
+    expect(routerLinks[2].linkParams).toBe('/about');
   });
 
   it('can click Heroes link in template', () => {
-    const heroesLinkDe = linkDes[1];
-    const heroesLink = links[1];
+    const heroesLinkDe = linkDes[1];   // heroes link DebugElement
+    const heroesLink = routerLinks[1]; // heroes link directive
 
-    expect(heroesLink.navigatedTo).toBeNull('link should not have navigated yet');
+    expect(heroesLink.navigatedTo).toBeNull('should not have navigated yet');
 
     heroesLinkDe.triggerEventHandler('click', null);
     fixture.detectChanges();

aio/content/examples/testing/src/app/app.module.ts

@@ -1,29 +1,50 @@
 import { NgModule }         from '@angular/core';
 import { BrowserModule }    from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent }     from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
-import { AboutComponent }   from './about.component';
-import { BannerComponent }  from './banner.component';
+import { AboutComponent }   from './about/about.component';
+import { BannerComponent }  from './banner/banner.component';
+import { HeroService }      from './model/hero.service';
 import { UserService }      from './model/user.service';
-import { HeroService } from './model/hero.service';
-import { TwainService }     from './shared/twain.service';
-import { WelcomeComponent } from './welcome.component';
-
+import { TwainComponent }   from './twain/twain.component';
+import { TwainService }     from './twain/twain.service';
+import { WelcomeComponent } from './welcome/welcome.component';
 
 import { DashboardModule }  from './dashboard/dashboard.module';
 import { SharedModule }     from './shared/shared.module';
 
+import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService } from './in-memory-data.service';
+
 @NgModule({
   imports: [
     BrowserModule,
     DashboardModule,
     AppRoutingModule,
-    SharedModule
+    SharedModule,
+    HttpClientModule,
+
+    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
+    // and returns simulated server responses.
+    // Remove it when a real server is ready to receive requests.
+    HttpClientInMemoryWebApiModule.forRoot(
+      InMemoryDataService, { dataEncapsulation: false }
+    )
   ],
-  providers:    [ HeroService, TwainService, UserService ],
-  declarations: [ AppComponent, AboutComponent, BannerComponent, WelcomeComponent ],
-  bootstrap:    [ AppComponent ]
+  providers: [
+    HeroService,
+    TwainService,
+    UserService
+  ],
+  declarations: [
+    AppComponent,
+    AboutComponent,
+    BannerComponent,
+    TwainComponent,
+    WelcomeComponent ],
+  bootstrap: [ AppComponent ]
 })
 export class AppModule { }

aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts

@@ -1,130 +0,0 @@
-// #docplaster
-import { DependentService, FancyService } from './bag';
-
-///////// Fakes /////////
-export class FakeFancyService extends FancyService {
-  value = 'faked value';
-}
-////////////////////////
-// #docregion FancyService
-// Straight Jasmine - no imports from Angular test libraries
-
-describe('FancyService without the TestBed', () => {
-  let service: FancyService;
-
-  beforeEach(() => { service = new FancyService(); });
-
-  it('#getValue should return real value', () => {
-    expect(service.getValue()).toBe('real value');
-  });
-
-  it('#getAsyncValue should return async value', (done: DoneFn) => {
-    service.getAsyncValue().then(value => {
-      expect(value).toBe('async value');
-      done();
-    });
-  });
-
-  // #docregion getTimeoutValue
-  it('#getTimeoutValue should return timeout value',  (done: DoneFn) => {
-    service = new FancyService();
-    service.getTimeoutValue().then(value => {
-      expect(value).toBe('timeout value');
-      done();
-    });
-  });
-  // #enddocregion getTimeoutValue
-
-  it('#getObservableValue should return observable value', (done: DoneFn) => {
-    service.getObservableValue().subscribe(value => {
-      expect(value).toBe('observable value');
-      done();
-    });
-  });
-
-});
-// #enddocregion FancyService
-
-// DependentService requires injection of a FancyService
-// #docregion DependentService
-describe('DependentService without the TestBed', () => {
-  let service: DependentService;
-
-  it('#getValue should return real value by way of the real FancyService', () => {
-    service = new DependentService(new FancyService());
-    expect(service.getValue()).toBe('real value');
-  });
-
-  it('#getValue should return faked value by way of a fakeService', () => {
-    service = new DependentService(new FakeFancyService());
-    expect(service.getValue()).toBe('faked value');
-  });
-
-  it('#getValue should return faked value from a fake object', () => {
-    const fake =  { getValue: () => 'fake value' };
-    service = new DependentService(fake as FancyService);
-    expect(service.getValue()).toBe('fake value');
-  });
-
-  it('#getValue should return stubbed value from a FancyService spy', () => {
-    const fancy = new FancyService();
-    const stubValue = 'stub value';
-    const spy = spyOn(fancy, 'getValue').and.returnValue(stubValue);
-    service = new DependentService(fancy);
-
-    expect(service.getValue()).toBe(stubValue, 'service returned stub value');
-    expect(spy.calls.count()).toBe(1, 'stubbed method was called once');
-    expect(spy.calls.mostRecent().returnValue).toBe(stubValue);
-  });
-});
-// #enddocregion DependentService
-
-// #docregion ReversePipe
-import { ReversePipe } from './bag';
-
-describe('ReversePipe', () => {
-  let pipe: ReversePipe;
-
-  beforeEach(() => { pipe = new ReversePipe(); });
-
-  it('transforms "abc" to "cba"', () => {
-    expect(pipe.transform('abc')).toBe('cba');
-  });
-
-  it('no change to palindrome: "able was I ere I saw elba"', () => {
-    const palindrome = 'able was I ere I saw elba';
-    expect(pipe.transform(palindrome)).toBe(palindrome);
-  });
-
-});
-// #enddocregion ReversePipe
-
-
-import { ButtonComponent } from './bag';
-// #docregion ButtonComp
-describe('ButtonComp', () => {
-  let comp: ButtonComponent;
-  beforeEach(() => comp = new ButtonComponent());
-
-  it('#isOn should be false initially', () => {
-    expect(comp.isOn).toBe(false);
-  });
-
-  it('#clicked() should set #isOn to true', () => {
-    comp.clicked();
-    expect(comp.isOn).toBe(true);
-  });
-
-  it('#clicked() should set #message to "is on"', () => {
-    comp.clicked();
-    expect(comp.message).toMatch(/is on/i);
-  });
-
-  it('#clicked() should toggle #isOn', () => {
-    comp.clicked();
-    expect(comp.isOn).toBe(true);
-    comp.clicked();
-    expect(comp.isOn).toBe(false);
-  });
-});
-// #enddocregion ButtonComp

aio/content/examples/testing/src/app/bag/bag.spec.ts

@@ -1,681 +0,0 @@
-// #docplaster
-import {
-  BagModule,
-  BankAccountComponent, BankAccountParentComponent,
-  ButtonComponent,
-  Child1Component, Child2Component, Child3Component,
-  FancyService,
-  ExternalTemplateComponent,
-  InputComponent,
-  IoComponent, IoParentComponent,
-  MyIfComponent, MyIfChildComponent, MyIfParentComponent,
-  NeedsContentComponent, ParentComponent,
-  TestProvidersComponent, TestViewProvidersComponent,
-  ReversePipeComponent, ShellComponent
-} from './bag';
-
-import { By }          from '@angular/platform-browser';
-import { Component,
-         DebugElement,
-         Injectable }  from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-// Forms symbols imported only for a specific test below
-import { NgModel, NgControl } from '@angular/forms';
-
-import { async, ComponentFixture, fakeAsync, inject, TestBed, tick
-} from '@angular/core/testing';
-
-import { addMatchers, newEvent, click } from '../../testing';
-
-beforeEach( addMatchers );
-
-////////  Service Tests  /////////////
-// #docregion FancyService
-describe('use inject helper in beforeEach', () => {
-  let service: FancyService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({ providers: [FancyService] });
-
-    // `TestBed.get` returns the injectable or an
-    //  alternative object (including null) if the service provider is not found.
-    //  Of course it will be found in this case because we're providing it.
-    // #docregion testbed-get
-    service = TestBed.get(FancyService, null);
-    // #enddocregion testbed-get
-  });
-
-  it('should use FancyService', () => {
-      expect(service.getValue()).toBe('real value');
-  });
-
-  it('should use FancyService', () => {
-      expect(service.getValue()).toBe('real value');
-  });
-
-  it('test should wait for FancyService.getAsyncValue', async(() => {
-    service.getAsyncValue().then(
-      value => expect(value).toBe('async value')
-    );
-  }));
-
-  it('test should wait for FancyService.getTimeoutValue', async(() => {
-    service.getTimeoutValue().then(
-      value => expect(value).toBe('timeout value')
-    );
-  }));
-
-  it('test should wait for FancyService.getObservableValue', async(() => {
-    service.getObservableValue().subscribe(
-      value => expect(value).toBe('observable value')
-    );
-  }));
-
-  // Must use done. See https://github.com/angular/angular/issues/10127
-  it('test should wait for FancyService.getObservableDelayValue', (done: DoneFn) => {
-    service.getObservableDelayValue().subscribe(value => {
-      expect(value).toBe('observable delay value');
-      done();
-    });
-  });
-
-  it('should allow the use of fakeAsync', fakeAsync(() => {
-    let value: any;
-    service.getAsyncValue().then((val: any) => value = val);
-    tick(); // Trigger JS engine cycle until all promises resolve.
-    expect(value).toBe('async value');
-  }));
-});
-// #enddocregion FancyService
-
-describe('use inject within `it`', () => {
-  // #docregion getTimeoutValue
-  beforeEach(() => {
-    TestBed.configureTestingModule({ providers: [FancyService] });
-  });
-
-  // #enddocregion getTimeoutValue
-
-  it('should use modified providers',
-    inject([FancyService], (service: FancyService) => {
-      service.setValue('value modified in beforeEach');
-      expect(service.getValue()).toBe('value modified in beforeEach');
-    })
-  );
-
-  // #docregion getTimeoutValue
-  it('test should wait for FancyService.getTimeoutValue',
-    async(inject([FancyService], (service: FancyService) => {
-
-    service.getTimeoutValue().then(
-      value => expect(value).toBe('timeout value')
-    );
-  })));
-  // #enddocregion getTimeoutValue
-});
-
-describe('using async(inject) within beforeEach', () => {
-  let serviceValue: string;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({ providers: [FancyService] });
-  });
-
-  beforeEach( async(inject([FancyService], (service: FancyService) => {
-    service.getAsyncValue().then(value => serviceValue = value);
-  })));
-
-  it('should use asynchronously modified value ... in synchronous test', () => {
-    expect(serviceValue).toBe('async value');
-  });
-});
-
-
-/////////// Component Tests //////////////////
-
-describe('TestBed Component Tests', () => {
-
-  beforeEach( async(() => {
-    TestBed
-      .configureTestingModule({
-        imports: [BagModule],
-      })
-      // Compile everything in BagModule
-      .compileComponents();
-  }));
-
-  it('should create a component with inline template', () => {
-    const fixture = TestBed.createComponent(Child1Component);
-    fixture.detectChanges();
-
-    expect(fixture).toHaveText('Child');
-  });
-
-  it('should create a component with external template', () => {
-    const fixture = TestBed.createComponent(ExternalTemplateComponent);
-    fixture.detectChanges();
-
-    expect(fixture).toHaveText('from external template');
-  });
-
-  it('should allow changing members of the component', () => {
-    const fixture = TestBed.createComponent(MyIfComponent);
-
-    fixture.detectChanges();
-    expect(fixture).toHaveText('MyIf()');
-
-    fixture.componentInstance.showMore = true;
-    fixture.detectChanges();
-    expect(fixture).toHaveText('MyIf(More)');
-  });
-
-  it('should create a nested component bound to inputs/outputs', () => {
-    const fixture = TestBed.createComponent(IoParentComponent);
-
-    fixture.detectChanges();
-    const heroes = fixture.debugElement.queryAll(By.css('.hero'));
-    expect(heroes.length).toBeGreaterThan(0, 'has heroes');
-
-    const comp = fixture.componentInstance;
-    const hero = comp.heroes[0];
-
-    click(heroes[0]);
-    fixture.detectChanges();
-
-    const selected = fixture.debugElement.query(By.css('p'));
-    expect(selected).toHaveText(hero.name);
-  });
-
-  it('can access the instance variable of an `*ngFor` row component', () => {
-    const fixture = TestBed.createComponent(IoParentComponent);
-    const comp = fixture.componentInstance;
-    const heroName = comp.heroes[0].name; // first hero's name
-
-    fixture.detectChanges();
-    const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
-
-    const hero = ngForRow.context['hero']; // the hero object passed into the row
-    expect(hero.name).toBe(heroName, 'ngRow.context.hero');
-
-    const rowComp = ngForRow.componentInstance;
-    // jasmine.any is an "instance-of-type" test.
-    expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp');
-    expect(rowComp.hero.name).toBe(heroName, 'component.hero');
-  });
-
-
-  // #docregion ButtonComp
-  it('should support clicking a button', () => {
-    const fixture = TestBed.createComponent(ButtonComponent);
-    const btn  = fixture.debugElement.query(By.css('button'));
-    const span = fixture.debugElement.query(By.css('span')).nativeElement;
-
-    fixture.detectChanges();
-    expect(span.textContent).toMatch(/is off/i, 'before click');
-
-    click(btn);
-    fixture.detectChanges();
-    expect(span.textContent).toMatch(/is on/i, 'after click');
-  });
-  // #enddocregion ButtonComp
-
-  // ngModel is async so we must wait for it with promise-based `whenStable`
-  it('should support entering text in input box (ngModel)', async(() => {
-    const expectedOrigName = 'John';
-    const expectedNewName = 'Sally';
-
-    const fixture = TestBed.createComponent(InputComponent);
-    fixture.detectChanges();
-
-    const comp = fixture.componentInstance;
-    const input = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
-
-    expect(comp.name).toBe(expectedOrigName,
-      `At start name should be ${expectedOrigName} `);
-
-    // wait until ngModel binds comp.name to input box
-    fixture.whenStable().then(() => {
-      expect(input.value).toBe(expectedOrigName,
-        `After ngModel updates input box, input.value should be ${expectedOrigName} `);
-
-      // simulate user entering new name in input
-      input.value = expectedNewName;
-
-      // that change doesn't flow to the component immediately
-      expect(comp.name).toBe(expectedOrigName,
-        `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
-
-      // dispatch a DOM event so that Angular learns of input value change.
-      // then wait while ngModel pushes input.box value to comp.name
-      input.dispatchEvent(newEvent('input'));
-      return fixture.whenStable();
-    })
-    .then(() => {
-      expect(comp.name).toBe(expectedNewName,
-        `After ngModel updates the model, comp.name should be ${expectedNewName} `);
-    });
-  }));
-
-  // fakeAsync version of ngModel input test enables sync test style
-  // synchronous `tick` replaces asynchronous promise-base `whenStable`
-  it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => {
-    const expectedOrigName = 'John';
-    const expectedNewName = 'Sally';
-
-    const fixture = TestBed.createComponent(InputComponent);
-    fixture.detectChanges();
-
-    const comp =  fixture.componentInstance;
-    const input = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
-
-    expect(comp.name).toBe(expectedOrigName,
-      `At start name should be ${expectedOrigName} `);
-
-    // wait until ngModel binds comp.name to input box
-    tick();
-    expect(input.value).toBe(expectedOrigName,
-      `After ngModel updates input box, input.value should be ${expectedOrigName} `);
-
-    // simulate user entering new name in input
-    input.value = expectedNewName;
-
-    // that change doesn't flow to the component immediately
-    expect(comp.name).toBe(expectedOrigName,
-      `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
-
-    // dispatch a DOM event so that Angular learns of input value change.
-    // then wait a tick while ngModel pushes input.box value to comp.name
-    input.dispatchEvent(newEvent('input'));
-    tick();
-    expect(comp.name).toBe(expectedNewName,
-      `After ngModel updates the model, comp.name should be ${expectedNewName} `);
-  }));
-
-  // #docregion ReversePipeComp
-  it('ReversePipeComp should reverse the input text', fakeAsync(() => {
-    const inputText = 'the quick brown fox.';
-    const expectedText = '.xof nworb kciuq eht';
-
-    const fixture = TestBed.createComponent(ReversePipeComponent);
-    fixture.detectChanges();
-
-    const comp =  fixture.componentInstance;
-    const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
-    const span =  fixture.debugElement.query(By.css('span')).nativeElement  as HTMLElement;
-
-    // simulate user entering new name in input
-    input.value = inputText;
-
-    // dispatch a DOM event so that Angular learns of input value change.
-    // then wait a tick while ngModel pushes input.box value to comp.text
-    // and Angular updates the output span
-    input.dispatchEvent(newEvent('input'));
-    tick();
-    fixture.detectChanges();
-    expect(span.textContent).toBe(expectedText, 'output span');
-    expect(comp.text).toBe(inputText, 'component.text');
-  }));
-  // #enddocregion ReversePipeComp
-
-  // Use this technique to find attached directives of any kind
-  it('can examine attached directives and listeners', () => {
-    const fixture = TestBed.createComponent(InputComponent);
-    fixture.detectChanges();
-
-    const inputEl = fixture.debugElement.query(By.css('input'));
-
-    expect(inputEl.providerTokens).toContain(NgModel, 'NgModel directive');
-
-    const ngControl = inputEl.injector.get(NgControl);
-    expect(ngControl).toEqual(jasmine.any(NgControl), 'NgControl directive');
-
-    expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached');
-  });
-
-  // #docregion dom-attributes
-  it('BankAccountComponent should set attributes, styles, classes, and properties', () => {
-    const fixture = TestBed.createComponent(BankAccountParentComponent);
-    fixture.detectChanges();
-    const comp = fixture.componentInstance;
-
-    // the only child is debugElement of the BankAccount component
-    const el = fixture.debugElement.children[0];
-    const childComp = el.componentInstance as BankAccountComponent;
-    expect(childComp).toEqual(jasmine.any(BankAccountComponent));
-
-    expect(el.context).toBe(childComp, 'context is the child component');
-
-    expect(el.attributes['account']).toBe(childComp.id, 'account attribute');
-    expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute');
-
-    expect(el.classes['closed']).toBe(true, 'closed class');
-    expect(el.classes['open']).toBe(false, 'open class');
-
-    expect(el.styles['color']).toBe(comp.color, 'color style');
-    expect(el.styles['width']).toBe(comp.width + 'px', 'width style');
-  // #enddocregion dom-attributes
-
-    // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
-    // expect(el.properties['customProperty']).toBe(true, 'customProperty');
-
-  // #docregion dom-attributes
-  });
-  // #enddocregion dom-attributes
-
-
-});
-
-describe('TestBed Component Overrides:', () => {
-
-  it('should override ChildComp\'s template', () => {
-
-    const fixture = TestBed.configureTestingModule({
-      declarations: [Child1Component],
-    })
-    .overrideComponent(Child1Component, {
-      set: { template: '<span>Fake</span>' }
-    })
-    .createComponent(Child1Component);
-
-    fixture.detectChanges();
-    expect(fixture).toHaveText('Fake');
-  });
-
-  it('should override TestProvidersComp\'s FancyService provider', () => {
-    const fixture = TestBed.configureTestingModule({
-      declarations: [TestProvidersComponent],
-    })
-    .overrideComponent(TestProvidersComponent, {
-      remove: { providers: [FancyService]},
-      add:    { providers: [{ provide: FancyService, useClass: FakeFancyService }] },
-
-      // Or replace them all (this component has only one provider)
-      // set:    { providers: [{ provide: FancyService, useClass: FakeFancyService }] },
-    })
-    .createComponent(TestProvidersComponent);
-
-    fixture.detectChanges();
-    expect(fixture).toHaveText('injected value: faked value', 'text');
-
-    // Explore the providerTokens
-    const tokens = fixture.debugElement.providerTokens;
-    expect(tokens).toContain(fixture.componentInstance.constructor, 'component ctor');
-    expect(tokens).toContain(TestProvidersComponent, 'TestProvidersComp');
-    expect(tokens).toContain(FancyService, 'FancyService');
-  });
-
-  it('should override TestViewProvidersComp\'s FancyService viewProvider', () => {
-    const fixture = TestBed.configureTestingModule({
-      declarations: [TestViewProvidersComponent],
-    })
-    .overrideComponent(TestViewProvidersComponent, {
-      // remove: { viewProviders: [FancyService]},
-      // add:    { viewProviders: [{ provide: FancyService, useClass: FakeFancyService }] },
-
-      // Or replace them all (this component has only one viewProvider)
-      set:    { viewProviders: [{ provide: FancyService, useClass: FakeFancyService }] },
-    })
-    .createComponent(TestViewProvidersComponent);
-
-    fixture.detectChanges();
-    expect(fixture).toHaveText('injected value: faked value');
-  });
-
-  it('injected provider should not be same as component\'s provider', () => {
-
-    // TestComponent is parent of TestProvidersComponent
-    @Component({ template: '<my-service-comp></my-service-comp>' })
-    class TestComponent {}
-
-    // 3 levels of FancyService provider: module, TestCompomponent, TestProvidersComponent
-    const fixture = TestBed.configureTestingModule({
-      declarations: [TestComponent, TestProvidersComponent],
-      providers:    [FancyService]
-    })
-    .overrideComponent(TestComponent, {
-      set: { providers: [{ provide: FancyService, useValue: {} }] }
-    })
-    .overrideComponent(TestProvidersComponent, {
-      set: { providers: [{ provide: FancyService, useClass: FakeFancyService }] }
-    })
-    .createComponent(TestComponent);
-
-    let testBedProvider: FancyService;
-    let tcProvider: {};
-    let tpcProvider: FakeFancyService;
-
-    // `inject` uses TestBed's injector
-    inject([FancyService], (s: FancyService) => testBedProvider = s)();
-    tcProvider = fixture.debugElement.injector.get(FancyService);
-    tpcProvider = fixture.debugElement.children[0].injector.get(FancyService) as FakeFancyService;
-
-    expect(testBedProvider).not.toBe(<any> tcProvider, 'testBed/tc not same providers');
-    expect(testBedProvider).not.toBe(tpcProvider, 'testBed/tpc not same providers');
-
-    expect(testBedProvider instanceof FancyService).toBe(true, 'testBedProvider is FancyService');
-    expect(tcProvider).toEqual({}, 'tcProvider is {}');
-    expect(tpcProvider instanceof FakeFancyService).toBe(true, 'tpcProvider is FakeFancyService');
-  });
-
-  it('can access template local variables as references', () => {
-    const fixture = TestBed.configureTestingModule({
-      declarations: [ShellComponent, NeedsContentComponent, Child1Component, Child2Component, Child3Component],
-    })
-    .overrideComponent(ShellComponent, {
-      set: {
-        selector: 'test-shell',
-        template: `
-        <needs-content #nc>
-          <child-1 #content text="My"></child-1>
-          <child-2 #content text="dog"></child-2>
-          <child-2 text="has"></child-2>
-          <child-3 #content text="fleas"></child-3>
-          <div #content>!</div>
-        </needs-content>
-        `
-      }
-    })
-    .createComponent(ShellComponent);
-
-    fixture.detectChanges();
-
-    // NeedsContentComp is the child of ShellComp
-    const el = fixture.debugElement.children[0];
-    const comp = el.componentInstance;
-
-    expect(comp.children.toArray().length).toBe(4,
-      'three different child components and an ElementRef with #content');
-
-    expect(el.references['nc']).toBe(comp, '#nc reference to component');
-
-    // #docregion custom-predicate
-    // Filter for DebugElements with a #content reference
-    const contentRefs = el.queryAll( de => de.references['content']);
-    // #enddocregion custom-predicate
-    expect(contentRefs.length).toBe(4, 'elements w/ a #content reference');
-  });
-
-});
-
-describe('Nested (one-deep) component override', () => {
-
-  beforeEach( async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ParentComponent, FakeChildComponent]
-    })
-    .compileComponents();
-  }));
-
-  it('ParentComp should use Fake Child component', () => {
-    const fixture = TestBed.createComponent(ParentComponent);
-    fixture.detectChanges();
-    expect(fixture).toHaveText('Parent(Fake Child)');
-  });
-});
-
-describe('Nested (two-deep) component override', () => {
-
-  beforeEach( async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ParentComponent, FakeChildWithGrandchildComponent, FakeGrandchildComponent]
-    })
-    .compileComponents();
-  }));
-
-  it('should use Fake Grandchild component', () => {
-    const fixture = TestBed.createComponent(ParentComponent);
-    fixture.detectChanges();
-    expect(fixture).toHaveText('Parent(Fake Child(Fake Grandchild))');
-  });
-});
-
-describe('Lifecycle hooks w/ MyIfParentComp', () => {
-  let fixture: ComponentFixture<MyIfParentComponent>;
-  let parent:  MyIfParentComponent;
-  let child:   MyIfChildComponent;
-
-  beforeEach( async(() => {
-    TestBed.configureTestingModule({
-      imports: [FormsModule],
-      declarations: [MyIfChildComponent, MyIfParentComponent]
-    })
-    .compileComponents().then(() => {
-      fixture = TestBed.createComponent(MyIfParentComponent);
-      parent = fixture.componentInstance;
-    });
-  }));
-
-  it('should instantiate parent component', () => {
-    expect(parent).not.toBeNull('parent component should exist');
-  });
-
-  it('parent component OnInit should NOT be called before first detectChanges()', () => {
-    expect(parent.ngOnInitCalled).toBe(false);
-  });
-
-  it('parent component OnInit should be called after first detectChanges()', () => {
-    fixture.detectChanges();
-    expect(parent.ngOnInitCalled).toBe(true);
-  });
-
-  it('child component should exist after OnInit', () => {
-    fixture.detectChanges();
-    getChild();
-    expect(child instanceof MyIfChildComponent).toBe(true, 'should create child');
-  });
-
-  it('should have called child component\'s OnInit ', () => {
-    fixture.detectChanges();
-    getChild();
-    expect(child.ngOnInitCalled).toBe(true);
-  });
-
-  it('child component called OnChanges once', () => {
-    fixture.detectChanges();
-    getChild();
-    expect(child.ngOnChangesCounter).toBe(1);
-  });
-
-  it('changed parent value flows to child', () => {
-    fixture.detectChanges();
-    getChild();
-
-    parent.parentValue = 'foo';
-    fixture.detectChanges();
-
-    expect(child.ngOnChangesCounter).toBe(2,
-      'expected 2 changes: initial value and changed value');
-    expect(child.childValue).toBe('foo',
-      'childValue should eq changed parent value');
-  });
-
-  // must be async test to see child flow to parent
-  it('changed child value flows to parent', async(() => {
-    fixture.detectChanges();
-    getChild();
-
-    child.childValue = 'bar';
-
-    return new Promise(resolve => {
-      // Wait one JS engine turn!
-      setTimeout(() => resolve(), 0);
-    })
-    .then(() => {
-      fixture.detectChanges();
-
-      expect(child.ngOnChangesCounter).toBe(2,
-        'expected 2 changes: initial value and changed value');
-      expect(parent.parentValue).toBe('bar',
-        'parentValue should eq changed parent value');
-    });
-
-  }));
-
-  it('clicking "Close Child" triggers child OnDestroy', () => {
-    fixture.detectChanges();
-    getChild();
-
-    const btn = fixture.debugElement.query(By.css('button'));
-    click(btn);
-
-    fixture.detectChanges();
-    expect(child.ngOnDestroyCalled).toBe(true);
-  });
-
-  ////// helpers ///
-  /**
-   * Get the MyIfChildComp from parent; fail w/ good message if cannot.
-   */
-  function getChild() {
-
-    let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp
-
-    // The Hard Way: requires detailed knowledge of the parent template
-    try {
-      childDe = fixture.debugElement.children[4].children[0];
-    } catch (err) { /* we'll report the error */ }
-
-    // DebugElement.queryAll: if we wanted all of many instances:
-    childDe = fixture.debugElement
-      .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComponent; })[0];
-
-    // WE'LL USE THIS APPROACH !
-    // DebugElement.query: find first instance (if any)
-    childDe = fixture.debugElement
-      .query(function (de) { return de.componentInstance instanceof MyIfChildComponent; });
-
-    if (childDe && childDe.componentInstance) {
-      child = childDe.componentInstance;
-    } else {
-      fail('Unable to find MyIfChildComp within MyIfParentComp');
-    }
-
-    return child;
-  }
-});
-
-////////// Fakes ///////////
-
-@Component({
-  selector: 'child-1',
-  template: `Fake Child`
-})
-class FakeChildComponent { }
-
-@Component({
-  selector: 'child-1',
-  template: `Fake Child(<grandchild-1></grandchild-1>)`
-})
-class FakeChildWithGrandchildComponent { }
-
-@Component({
-  selector: 'grandchild-1',
-  template: `Fake Grandchild`
-})
-class FakeGrandchildComponent { }
-
-@Injectable()
-class FakeFancyService extends FancyService {
-  value = 'faked value';
-}

aio/content/examples/testing/src/app/banner-inline.component.spec.ts

@@ -1,55 +0,0 @@
-// #docplaster
-// #docregion imports
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By }              from '@angular/platform-browser';
-import { DebugElement }    from '@angular/core';
-
-import { BannerComponent } from './banner-inline.component';
-// #enddocregion imports
-
-// #docregion setup
-describe('BannerComponent (inline template)', () => {
-
-  let comp:    BannerComponent;
-  let fixture: ComponentFixture<BannerComponent>;
-  let de:      DebugElement;
-  let el:      HTMLElement;
-
-// #docregion before-each
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [ BannerComponent ], // declare the test component
-    });
-
-    fixture = TestBed.createComponent(BannerComponent);
-
-    comp = fixture.componentInstance; // BannerComponent test instance
-
-    // query for the title <h1> by CSS element selector
-    de = fixture.debugElement.query(By.css('h1'));
-    el = de.nativeElement;
-  });
-// #enddocregion before-each
-// #enddocregion setup
-
-  // #docregion test-w-o-detect-changes
-  it('no title in the DOM until manually call `detectChanges`', () => {
-    expect(el.textContent).toEqual('');
-  });
-  // #enddocregion test-w-o-detect-changes
-
-  // #docregion tests
-  it('should display original title', () => {
-    fixture.detectChanges();
-    expect(el.textContent).toContain(comp.title);
-  });
-
-  it('should display a different test title', () => {
-    comp.title = 'Test Title';
-    fixture.detectChanges();
-    expect(el.textContent).toContain('Test Title');
-  });
-  // #enddocregion tests
-// #docregion setup
-});
-// #enddocregion setup

aio/content/examples/testing/src/app/banner.component.spec.ts

@@ -1,53 +0,0 @@
-// #docplaster
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By }              from '@angular/platform-browser';
-import { DebugElement }    from '@angular/core';
-
-import { BannerComponent } from './banner.component';
-
-describe('BannerComponent (templateUrl)', () => {
-
-  let comp:    BannerComponent;
-  let fixture: ComponentFixture<BannerComponent>;
-  let de:      DebugElement;
-  let el:      HTMLElement;
-
-  // #docregion async-before-each
-  // async beforeEach
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ BannerComponent ], // declare the test component
-    })
-    .compileComponents();  // compile template and css
-  }));
-  // #enddocregion async-before-each
-
-  // #docregion sync-before-each
-  // synchronous beforeEach
-  beforeEach(() => {
-    fixture = TestBed.createComponent(BannerComponent);
-
-    comp = fixture.componentInstance; // BannerComponent test instance
-
-    // query for the title <h1> by CSS element selector
-    de = fixture.debugElement.query(By.css('h1'));
-    el = de.nativeElement;
-  });
-  // #enddocregion sync-before-each
-
-  it('no title in the DOM until manually call `detectChanges`', () => {
-    expect(el.textContent).toEqual('');
-  });
-
-  it('should display original title', () => {
-    fixture.detectChanges();
-    expect(el.textContent).toContain(comp.title);
-  });
-
-  it('should display a different test title', () => {
-    comp.title = 'Test Title';
-    fixture.detectChanges();
-    expect(el.textContent).toContain('Test Title');
-  });
-
-});

aio/content/examples/testing/src/app/banner/banner-external.component.spec.ts

@@ -0,0 +1,72 @@
+// #docplaster
+// #docregion import-async
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// #enddocregion import-async
+import { By }              from '@angular/platform-browser';
+import { DebugElement }    from '@angular/core';
+
+import { BannerComponent } from './banner-external.component';
+
+describe('BannerComponent (external files)', () => {
+  let component: BannerComponent;
+  let fixture:   ComponentFixture<BannerComponent>;
+  let h1:        HTMLElement;
+
+  describe('Two beforeEach', () => {
+    // #docregion async-before-each
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [ BannerComponent ],
+      })
+      .compileComponents();  // compile template and css
+    }));
+    // #enddocregion async-before-each
+
+    // synchronous beforeEach
+    // #docregion sync-before-each
+    beforeEach(() => {
+      fixture = TestBed.createComponent(BannerComponent);
+      component = fixture.componentInstance; // BannerComponent test instance
+      h1 = fixture.nativeElement.querySelector('h1');
+    });
+    // #enddocregion sync-before-each
+
+    tests();
+  });
+
+  describe('One beforeEach', () => {
+    // #docregion one-before-each
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [ BannerComponent ],
+      })
+      .compileComponents()
+      .then(() => {
+        fixture = TestBed.createComponent(BannerComponent);
+        component = fixture.componentInstance;
+        h1 = fixture.nativeElement.querySelector('h1');
+      });
+    }));
+    // #enddocregion one-before-each
+
+    tests();
+  });
+
+  function tests() {
+    it('no title in the DOM until manually call `detectChanges`', () => {
+      expect(h1.textContent).toEqual('');
+    });
+
+    it('should display original title', () => {
+      fixture.detectChanges();
+      expect(h1.textContent).toContain(component.title);
+    });
+
+    it('should display a different test title', () => {
+      component.title = 'Test Title';
+      fixture.detectChanges();
+      expect(h1.textContent).toContain('Test Title');
+    });
+  }
+});
+

aio/content/examples/testing/src/app/banner/banner-external.component.ts

@@ -1,11 +1,14 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
+// #docregion metadata
 @Component({
   selector: 'app-banner',
-  template: '<h1>{{title}}</h1>'
+  templateUrl: './banner-external.component.html',
+  styleUrls:  ['./banner-external.component.css']
 })
+// #enddocregion metadata
 export class BannerComponent {
   title = 'Test Tour of Heroes';
 }
-

aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts

@@ -0,0 +1,119 @@
+// #docplaster
+// #docregion import-by
+import { By } from '@angular/platform-browser';
+// #enddocregion import-by
+// #docregion import-debug-element
+import { DebugElement } from '@angular/core';
+// #enddocregion import-debug-element
+// #docregion v1
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// #enddocregion v1
+import { BannerComponent } from './banner-initial.component';
+/*
+// #docregion v1
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent', () => {
+// #enddocregion v1
+*/
+describe('BannerComponent (initial CLI generated)', () => {
+// #docregion v1
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeDefined();
+  });
+});
+// #enddocregion v1
+
+// #docregion v2
+describe('BannerComponent (minimal)', () => {
+  it('should create', () => {
+    // #docregion configureTestingModule
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ]
+    });
+    // #enddocregion configureTestingModule
+    // #docregion createComponent
+    const fixture = TestBed.createComponent(BannerComponent);
+    // #enddocregion createComponent
+    // #docregion componentInstance
+    const component = fixture.componentInstance;
+    expect(component).toBeDefined();
+    // #enddocregion componentInstance
+  });
+});
+// #enddocregion v2
+
+// #docregion v3, v4
+describe('BannerComponent (with beforeEach)', () => {
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ]
+    });
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeDefined();
+  });
+// #enddocregion v3
+
+// #docregion v4-test-2
+  it('should contain "banner works!"', () => {
+    const bannerElement: HTMLElement = fixture.nativeElement;
+    expect(bannerElement.textContent).toContain('banner works!');
+  });
+// #enddocregion v4-test-2
+
+// #docregion v4-test-3
+  it('should have <p> with "banner works!"', () => {
+    // #docregion nativeElement
+    const bannerElement: HTMLElement = fixture.nativeElement;
+    // #enddocregion nativeElement
+    const p = bannerElement.querySelector('p');
+    expect(p.textContent).toEqual('banner works!');
+  });
+// #enddocregion v4-test-3
+
+
+// #docregion v4-test-4
+it('should find the <p> with fixture.debugElement.nativeElement)', () => {
+  // #docregion debugElement-nativeElement
+  const bannerDe: DebugElement = fixture.debugElement;
+  const bannerEl: HTMLElement = bannerDe.nativeElement;
+  // #enddocregion debugElement-nativeElement
+  const p = bannerEl.querySelector('p');
+  expect(p.textContent).toEqual('banner works!');
+});
+// #enddocregion v4-test-4
+
+// #docregion v4-test-5
+it('should find the <p> with fixture.debugElement.query(By.css)', () => {
+  const bannerDe: DebugElement = fixture.debugElement;
+  const paragraphDe = bannerDe.query(By.css('p'));
+  const p: HTMLElement = paragraphDe.nativeElement;
+  expect(p.textContent).toEqual('banner works!');
+});
+// #enddocregion v4-test-5
+// #docregion v3
+});
+// #enddocregion v3, v4

aio/content/examples/testing/src/app/banner/banner-initial.component.ts

@@ -0,0 +1,10 @@
+// BannerComponent as initially generated by the CLI
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-banner',
+  template: `<p>banner works!</p>`,
+  styles: []
+})
+export class BannerComponent { }

aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts

@@ -7,53 +7,45 @@ import { async } from '@angular/core/testing';
 import { ComponentFixtureAutoDetect } from '@angular/core/testing';
 // #enddocregion import-ComponentFixtureAutoDetect
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By }              from '@angular/platform-browser';
-import { DebugElement }    from '@angular/core';
 
 import { BannerComponent } from './banner.component';
 
 describe('BannerComponent (AutoChangeDetect)', () => {
   let comp:    BannerComponent;
   let fixture: ComponentFixture<BannerComponent>;
-  let de:      DebugElement;
-  let el:      HTMLElement;
+  let h1:      HTMLElement;
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     // #docregion auto-detect
     TestBed.configureTestingModule({
       declarations: [ BannerComponent ],
       providers: [
         { provide: ComponentFixtureAutoDetect, useValue: true }
       ]
-    })
+    });
     // #enddocregion auto-detect
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
     fixture = TestBed.createComponent(BannerComponent);
     comp = fixture.componentInstance;
-    de = fixture.debugElement.query(By.css('h1'));
-    el = de.nativeElement;
+    h1 = fixture.nativeElement.querySelector('h1');
   });
 
   // #docregion auto-detect-tests
   it('should display original title', () => {
     // Hooray! No `fixture.detectChanges()` needed
-    expect(el.textContent).toContain(comp.title);
+    expect(h1.textContent).toContain(comp.title);
   });
 
   it('should still see original title after comp.title change', () => {
     const oldTitle = comp.title;
     comp.title = 'Test Title';
     // Displayed title is old because Angular didn't hear the change :(
-    expect(el.textContent).toContain(oldTitle);
+    expect(h1.textContent).toContain(oldTitle);
   });
 
   it('should display updated title after detectChanges', () => {
     comp.title = 'Test Title';
     fixture.detectChanges(); // detect changes explicitly
-    expect(el.textContent).toContain(comp.title);
+    expect(h1.textContent).toContain(comp.title);
   });
   // #enddocregion auto-detect-tests
 });

aio/content/examples/testing/src/app/banner/banner.component.spec.ts

@@ -0,0 +1,56 @@
+// #docplaster
+// #docregion
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent (inline template)', () => {
+// #docregion setup
+  let component: BannerComponent;
+  let fixture:   ComponentFixture<BannerComponent>;
+  let h1:        HTMLElement;
+
+  // #docregion configure-and-create
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BannerComponent ],
+    });
+    fixture = TestBed.createComponent(BannerComponent);
+    // #enddocregion configure-and-create
+    component = fixture.componentInstance; // BannerComponent test instance
+    h1 = fixture.nativeElement.querySelector('h1');
+    // #docregion configure-and-create
+  });
+// #enddocregion setup, configure-and-create
+
+// #docregion test-w-o-detect-changes
+  it('no title in the DOM after createComponent()', () => {
+    expect(h1.textContent).toEqual('');
+  });
+// #enddocregion test-w-o-detect-changes
+
+// #docregion expect-h1-default-v1
+  it('should display original title', () => {
+    // #enddocregion expect-h1-default-v1
+    fixture.detectChanges();
+    // #docregion expect-h1-default-v1
+    expect(h1.textContent).toContain(component.title);
+  });
+  // #enddocregion expect-h1-default-v1
+
+// #docregion expect-h1-default
+it('should display original title after detectChanges()', () => {
+  fixture.detectChanges();
+  expect(h1.textContent).toContain(component.title);
+});
+// #enddocregion expect-h1-default
+
+// #docregion after-change
+it('should display a different test title', () => {
+  component.title = 'Test Title';
+  fixture.detectChanges();
+  expect(h1.textContent).toContain('Test Title');
+});
+// #enddocregion after-change
+});

aio/content/examples/testing/src/app/banner/banner.component.ts

@@ -1,12 +1,12 @@
-// #docregion
 import { Component } from '@angular/core';
 
+// #docregion component
 @Component({
   selector: 'app-banner',
-  templateUrl: './banner.component.html',
-  styleUrls:  ['./banner.component.css']
+  template: '<h1>{{title}}</h1>',
+  styles: ['h1 { color: green; font-size: 350%}']
 })
 export class BannerComponent {
   title = 'Test Tour of Heroes';
 }
-
+// #enddocregion component

aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html

@@ -1,4 +0,0 @@
-<!-- #docregion -->
-<div (click)="click()" class="hero">
-  {{hero.name | uppercase}}
-</div>

aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts

@@ -1,7 +1,9 @@
+
+// #docplaster
 import { async, ComponentFixture, TestBed
 } from '@angular/core/testing';
 
-import { By }           from '@angular/platform-browser';
+import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
 import { addMatchers, click } from '../../testing';
@@ -11,64 +13,96 @@ import { DashboardHeroComponent } from './dashboard-hero.component';
 
 beforeEach( addMatchers );
 
+describe('DashboardHeroComponent class only', () => {
+  // #docregion class-only
+  it('raises the selected event when clicked', () => {
+    const comp = new DashboardHeroComponent();
+    const hero: Hero = { id: 42, name: 'Test' };
+    comp.hero = hero;
+
+    comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
+    comp.click();
+  });
+  // #enddocregion class-only
+});
+
 describe('DashboardHeroComponent when tested directly', () => {
 
   let comp: DashboardHeroComponent;
   let expectedHero: Hero;
   let fixture: ComponentFixture<DashboardHeroComponent>;
-  let heroEl: DebugElement;
+  let heroDe: DebugElement;
+  let heroEl: HTMLElement;
 
-  // #docregion setup, compile-components
-  // async beforeEach
-  beforeEach( async(() => {
+  beforeEach(async(() => {
+    // #docregion setup, config-testbed
     TestBed.configureTestingModule({
-      declarations: [ DashboardHeroComponent ],
+      declarations: [ DashboardHeroComponent ]
     })
-    .compileComponents(); // compile template and css
+    // #enddocregion setup, config-testbed
+    .compileComponents();
   }));
-  // #enddocregion compile-components
 
-  // synchronous beforeEach
   beforeEach(() => {
+    // #docregion setup
     fixture = TestBed.createComponent(DashboardHeroComponent);
     comp    = fixture.componentInstance;
-    heroEl  = fixture.debugElement.query(By.css('.hero')); // find hero element
 
-    // pretend that it was wired to something that supplied a hero
-    expectedHero = new Hero(42, 'Test Name');
+    // find the hero's DebugElement and element
+    heroDe  = fixture.debugElement.query(By.css('.hero'));
+    heroEl = heroDe.nativeElement;
+
+    // mock the hero supplied by the parent component
+    expectedHero = { id: 42, name: 'Test Name' };
+
+    // simulate the parent setting the input property with that hero
     comp.hero = expectedHero;
-    fixture.detectChanges(); // trigger initial data binding
+
+    // trigger initial data binding
+    fixture.detectChanges();
+    // #enddocregion setup
   });
-  // #enddocregion setup
 
   // #docregion name-test
-  it('should display hero name', () => {
+  it('should display hero name in uppercase', () => {
     const expectedPipedName = expectedHero.name.toUpperCase();
-    expect(heroEl.nativeElement.textContent).toContain(expectedPipedName);
+    expect(heroEl.textContent).toContain(expectedPipedName);
   });
   // #enddocregion name-test
 
   // #docregion click-test
-  it('should raise selected event when clicked', () => {
+  it('should raise selected event when clicked (triggerEventHandler)', () => {
     let selectedHero: Hero;
     comp.selected.subscribe((hero: Hero) => selectedHero = hero);
 
   // #docregion trigger-event-handler
-    heroEl.triggerEventHandler('click', null);
+    heroDe.triggerEventHandler('click', null);
   // #enddocregion trigger-event-handler
     expect(selectedHero).toBe(expectedHero);
   });
   // #enddocregion click-test
 
-  // #docregion click-test-2
-  it('should raise selected event when clicked', () => {
-    let selectedHero: Hero;
-    comp.selected.subscribe((hero: Hero) => selectedHero = hero);
+    // #docregion click-test-2
+    it('should raise selected event when clicked (element.click)', () => {
+      let selectedHero: Hero;
+      comp.selected.subscribe((hero: Hero) => selectedHero = hero);
+
+      heroEl.click();
+      expect(selectedHero).toBe(expectedHero);
+    });
+    // #enddocregion click-test-2
+
+  // #docregion click-test-3
+  it('should raise selected event when clicked (click helper)', () => {
+    let selectedHero: Hero;
+    comp.selected.subscribe(hero => selectedHero = hero);
+
+    click(heroDe); // click helper with DebugElement
+    click(heroEl); // click helper with native element
 
-    click(heroEl);   // triggerEventHandler helper
     expect(selectedHero).toBe(expectedHero);
   });
-  // #enddocregion click-test-2
+  // #enddocregion click-test-3
 });
 
 //////////////////
@@ -76,28 +110,31 @@ describe('DashboardHeroComponent when tested directly', () => {
 describe('DashboardHeroComponent when inside a test host', () => {
   let testHost: TestHostComponent;
   let fixture: ComponentFixture<TestHostComponent>;
-  let heroEl: DebugElement;
+  let heroEl: HTMLElement;
 
-  // #docregion test-host-setup
-  beforeEach( async(() => {
+  beforeEach(async(() => {
+    // #docregion test-host-setup
     TestBed.configureTestingModule({
-      declarations: [ DashboardHeroComponent, TestHostComponent ], // declare both
-    }).compileComponents();
+      declarations: [ DashboardHeroComponent, TestHostComponent ]
+    })
+    // #enddocregion test-host-setup
+    .compileComponents();
   }));
 
   beforeEach(() => {
+    // #docregion test-host-setup
     // create TestHostComponent instead of DashboardHeroComponent
     fixture  = TestBed.createComponent(TestHostComponent);
     testHost = fixture.componentInstance;
-    heroEl   = fixture.debugElement.query(By.css('.hero')); // find hero
+    heroEl   = fixture.nativeElement.querySelector('.hero');
     fixture.detectChanges(); // trigger initial data binding
+    // #enddocregion test-host-setup
   });
-  // #enddocregion test-host-setup
 
   // #docregion test-host-tests
   it('should display hero name', () => {
     const expectedPipedName = testHost.hero.name.toUpperCase();
-    expect(heroEl.nativeElement.textContent).toContain(expectedPipedName);
+    expect(heroEl.textContent).toContain(expectedPipedName);
   });
 
   it('should raise selected event when clicked', () => {
@@ -114,10 +151,12 @@ import { Component } from '@angular/core';
 // #docregion test-host
 @Component({
   template: `
-    <dashboard-hero  [hero]="hero"  (selected)="onSelected($event)"></dashboard-hero>`
+    <dashboard-hero
+      [hero]="hero" (selected)="onSelected($event)">
+    </dashboard-hero>`
 })
 class TestHostComponent {
-  hero = new Hero(42, 'Test Name');
+  hero: Hero = {id: 42, name: 'Test Name' };
   selectedHero: Hero;
   onSelected(hero: Hero) { this.selectedHero = hero; }
 }

aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts

@@ -5,13 +5,17 @@ import { Hero } from '../model/hero';
 
 // #docregion component
 @Component({
-  selector:    'dashboard-hero',
-  templateUrl: './dashboard-hero.component.html',
+  selector: 'dashboard-hero',
+  template: `
+    <div (click)="click()" class="hero">
+      {{hero.name | uppercase}}
+    </div>`,
   styleUrls: [ './dashboard-hero.component.css' ]
 })
+// #docregion class
 export class DashboardHeroComponent {
   @Input() hero: Hero;
   @Output() selected = new EventEmitter<Hero>();
   click() { this.selected.emit(this.hero); }
 }
-// #enddocregion component
+// #enddocregion component, class

aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts

@@ -1,24 +1,24 @@
 import { Router } from '@angular/router';
 
 import { DashboardComponent } from './dashboard.component';
-import { Hero }               from '../model';
+import { Hero }               from '../model/hero';
 
 import { addMatchers }     from '../../testing';
-import { FakeHeroService } from '../model/testing';
+import { TestHeroService, HeroService } from '../model/testing/test-hero.service';
 
 class FakeRouter {
   navigateByUrl(url: string) { return url;  }
 }
 
-describe('DashboardComponent: w/o Angular TestBed', () => {
+describe('DashboardComponent class only', () => {
   let comp: DashboardComponent;
-  let heroService: FakeHeroService;
+  let heroService: TestHeroService;
   let router: Router;
 
   beforeEach(() => {
     addMatchers();
     router = new FakeRouter() as any as Router;
-    heroService = new FakeHeroService();
+    heroService = new TestHeroService();
     comp = new DashboardComponent(router, heroService);
   });
 
@@ -35,17 +35,19 @@ describe('DashboardComponent: w/o Angular TestBed', () => {
 
   it('should HAVE heroes after HeroService gets them', (done: DoneFn) => {
     comp.ngOnInit(); // ngOnInit -> getHeroes
-    heroService.lastPromise // the one from getHeroes
-      .then(() => {
+    heroService.lastResult // the one from getHeroes
+      .subscribe(
+        () => {
         // throw new Error('deliberate error'); // see it fail gracefully
         expect(comp.heroes.length).toBeGreaterThan(0,
           'should have heroes after service promise resolves');
-      })
-      .then(done, done.fail);
+        done();
+      },
+      done.fail);
   });
 
   it('should tell ROUTER to navigate by hero id', () => {
-    const hero = new Hero(42, 'Abbracadabra');
+    const hero: Hero = {id: 42, name: 'Abbracadabra' };
     const spy = spyOn(router, 'navigateByUrl');
 
     comp.gotoDetail(hero);

aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts

@@ -2,9 +2,9 @@
 import { async, inject, ComponentFixture, TestBed
 } from '@angular/core/testing';
 
-import { addMatchers, click } from '../../testing';
-import { HeroService }        from '../model';
-import { FakeHeroService }    from '../model/testing';
+import { addMatchers, asyncData, click } from '../../testing';
+import { HeroService }   from '../model/hero.service';
+import { getTestHeroes } from '../model/testing/test-heroes';
 
 import { By }     from '@angular/platform-browser';
 import { Router } from '@angular/router';
@@ -12,12 +12,6 @@ import { Router } from '@angular/router';
 import { DashboardComponent } from './dashboard.component';
 import { DashboardModule }    from './dashboard.module';
 
-// #docregion router-stub
-class RouterStub {
-  navigateByUrl(url: string) { return url; }
-}
-// #enddocregion router-stub
-
 beforeEach ( addMatchers );
 
 let comp: DashboardComponent;
@@ -37,8 +31,8 @@ describe('DashboardComponent (deep)', () => {
   tests(clickForDeep);
 
   function clickForDeep() {
-    // get first <div class="hero"> DebugElement
-    const heroEl = fixture.debugElement.query(By.css('.hero'));
+    // get first <div class="hero">
+    const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
     click(heroEl);
   }
 });
@@ -61,24 +55,32 @@ describe('DashboardComponent (shallow)', () => {
 
   function clickForShallow() {
     // get first <dashboard-hero> DebugElement
-    const heroEl = fixture.debugElement.query(By.css('dashboard-hero'));
-    heroEl.triggerEventHandler('selected', comp.heroes[0]);
+    const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
+    heroDe.triggerEventHandler('selected', comp.heroes[0]);
   }
 });
 
 /** Add TestBed providers, compile, and create DashboardComponent */
 function compileAndCreate() {
   // #docregion compile-and-create-body
-  beforeEach( async(() => {
+  beforeEach(async(() => {
+    // #docregion router-spy
+    const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
+    const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);
+
     TestBed.configureTestingModule({
       providers: [
-        { provide: HeroService, useClass: FakeHeroService },
-        { provide: Router,      useClass: RouterStub }
+        { provide: HeroService, useValue: heroServiceSpy },
+        { provide: Router,      useValue: routerSpy }
       ]
     })
+    // #enddocregion router-spy
     .compileComponents().then(() => {
       fixture = TestBed.createComponent(DashboardComponent);
       comp = fixture.componentInstance;
+
+      // getHeroes spy returns observable of test heroes
+      heroServiceSpy.getHeroes.and.returnValue(asyncData(getTestHeroes()));
     });
     // #enddocregion compile-and-create-body
   }));
@@ -104,8 +106,11 @@ function tests(heroClick: Function) {
 
   describe('after get dashboard heroes', () => {
 
+    let router: Router;
+
      // Trigger component so it gets heroes and binds to them
-     beforeEach( async(() => {
+     beforeEach(async(() => {
+        router = fixture.debugElement.injector.get(Router);
         fixture.detectChanges(); // runs ngOnInit -> getHeroes
         fixture.whenStable() // No need for the `lastPromise` hack!
           .then(() => fixture.detectChanges()); // bind to heroes
@@ -119,29 +124,25 @@ function tests(heroClick: Function) {
     it('should DISPLAY heroes', () => {
       // Find and examine the displayed heroes
       // Look for them in the DOM by css class
-      const heroes = fixture.debugElement.queryAll(By.css('dashboard-hero'));
+      const heroes = fixture.nativeElement.querySelectorAll('dashboard-hero');
       expect(heroes.length).toBe(4, 'should display 4 heroes');
     });
 
-    // #docregion navigate-test, inject
-    it('should tell ROUTER to navigate when hero clicked',
-      inject([Router], (router: Router) => { // ...
-    // #enddocregion inject
-
-      const spy = spyOn(router, 'navigateByUrl');
+    // #docregion navigate-test
+    it('should tell ROUTER to navigate when hero clicked', () => {
 
       heroClick(); // trigger click on first inner <div class="hero">
 
-      // args passed to router.navigateByUrl()
+      // args passed to router.navigateByUrl() spy
+      const spy = router.navigateByUrl as jasmine.Spy;
       const navArgs = spy.calls.first().args[0];
 
       // expecting to navigate to id of the component's first hero
       const id = comp.heroes[0].id;
       expect(navArgs).toBe('/heroes/' + id,
         'should nav to HeroDetail for first hero');
-    // #docregion inject
-    }));
-    // #enddocregion navigate-test, inject
+    });
+    // #enddocregion navigate-test
   });
 }
 

aio/content/examples/testing/src/app/dashboard/dashboard.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router }            from '@angular/router';
 
-import { Hero } from '../model/hero';
+import { Hero }        from '../model/hero';
 import { HeroService } from '../model/hero.service';
 
 @Component({
@@ -23,7 +23,7 @@ export class DashboardComponent implements OnInit {
 
   ngOnInit() {
     this.heroService.getHeroes()
-      .then(heroes => this.heroes = heroes.slice(1, 5));
+      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
   }
 
   // #docregion goto-detail

aio/content/examples/testing/src/app/demo/async-helper.spec.ts

@@ -1,7 +1,8 @@
 // tslint:disable-next-line:no-unused-variable
 import { async, fakeAsync, tick } from '@angular/core/testing';
 
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { delay } from 'rxjs/operators';
 
 describe('Angular async helper', () => {
   let actuallyDone = false;
@@ -34,8 +35,8 @@ describe('Angular async helper', () => {
 
   // Use done. Cannot use setInterval with async or fakeAsync
   // See https://github.com/angular/angular/issues/10127
-  it('should run async test with successful delayed Observable', (done: any) => {
-    const source = Observable.of(true).delay(10);
+  it('should run async test with successful delayed Observable', (done: DoneFn) => {
+    const source = of(true).pipe(delay(10));
     source.subscribe(
       val => actuallyDone = true,
       err => fail(err),
@@ -46,7 +47,7 @@ describe('Angular async helper', () => {
   // Cannot use setInterval from within an async zone test
   // See https://github.com/angular/angular/issues/10127
   // xit('should run async test with successful delayed Observable', async(() => {
-  //   const source = Observable.of(true).delay(10);
+  // const source = of(true).pipe(delay(10));
   //   source.subscribe(
   //     val => actuallyDone = true,
   //     err => fail(err)
@@ -56,7 +57,7 @@ describe('Angular async helper', () => {
   // // Fail message: Error: 1 periodic timer(s) still in the queue
   // // See https://github.com/angular/angular/issues/10127
   // xit('should run async test with successful delayed Observable', fakeAsync(() => {
-  //   const source = Observable.of(true).delay(10);
+  // const source = of(true).pipe(delay(10));
   //   source.subscribe(
   //     val => actuallyDone = true,
   //     err => fail(err)

aio/content/examples/testing/src/app/demo/demo-main.ts

@@ -1,5 +1,5 @@
 // main app entry point
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BagModule } from './bag';
+import { DemoModule } from './demo';
 
-platformBrowserDynamic().bootstrapModule(BagModule);
+platformBrowserDynamic().bootstrapModule(DemoModule);

aio/content/examples/testing/src/app/demo/demo.spec.ts

@@ -0,0 +1,153 @@
+// #docplaster
+import {
+  LightswitchComponent,
+  MasterService,
+  ValueService,
+  ReversePipe
+} from './demo';
+
+///////// Fakes /////////
+export class FakeValueService extends ValueService {
+  value = 'faked service value';
+}
+////////////////////////
+describe('demo (no TestBed):', () => {
+
+  // #docregion ValueService
+  // Straight Jasmine testing without Angular's testing support
+  describe('ValueService', () => {
+    let service: ValueService;
+    beforeEach(() => { service = new ValueService(); });
+
+    it('#getValue should return real value', () => {
+      expect(service.getValue()).toBe('real value');
+    });
+
+    it('#getObservableValue should return value from observable',
+      (done: DoneFn) => {
+      service.getObservableValue().subscribe(value => {
+        expect(value).toBe('observable value');
+        done();
+      });
+    });
+
+    it('#getPromiseValue should return value from a promise',
+      (done: DoneFn) => {
+      service.getPromiseValue().then(value => {
+        expect(value).toBe('promise value');
+        done();
+      });
+    });
+  });
+  // #enddocregion ValueService
+
+  // MasterService requires injection of a ValueService
+  // #docregion MasterService
+  describe('MasterService without Angular testing support', () => {
+    let masterService: MasterService;
+
+    it('#getValue should return real value from the real service', () => {
+      masterService = new MasterService(new ValueService());
+      expect(masterService.getValue()).toBe('real value');
+    });
+
+    it('#getValue should return faked value from a fakeService', () => {
+      masterService = new MasterService(new FakeValueService());
+      expect(masterService.getValue()).toBe('faked service value');
+    });
+
+    it('#getValue should return faked value from a fake object', () => {
+      const fake =  { getValue: () => 'fake value' };
+      masterService = new MasterService(fake as ValueService);
+      expect(masterService.getValue()).toBe('fake value');
+    });
+
+    it('#getValue should return stubbed value from a spy', () => {
+      // create `getValue` spy on an object representing the ValueService
+      const valueServiceSpy =
+        jasmine.createSpyObj('ValueService', ['getValue']);
+
+      // set the value to return when the `getValue` spy is called.
+      const stubValue = 'stub value';
+      valueServiceSpy.getValue.and.returnValue(stubValue);
+
+      masterService = new MasterService(valueServiceSpy);
+
+      expect(masterService.getValue())
+        .toBe(stubValue, 'service returned stub value');
+      expect(valueServiceSpy.getValue.calls.count())
+        .toBe(1, 'spy method was called once');
+      expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+        .toBe(stubValue);
+    });
+  });
+  // #enddocregion MasterService
+
+  describe('MasterService (no beforeEach)', () => {
+    // #docregion no-before-each-test
+    it('#getValue should return stubbed value from a spy', () => {
+      // #docregion no-before-each-setup-call
+      const { masterService, stubValue, valueServiceSpy } = setup();
+      // #enddocregion no-before-each-setup-call
+      expect(masterService.getValue())
+        .toBe(stubValue, 'service returned stub value');
+      expect(valueServiceSpy.getValue.calls.count())
+        .toBe(1, 'spy method was called once');
+      expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+        .toBe(stubValue);
+    });
+    // #enddocregion no-before-each-test
+
+    // #docregion no-before-each-setup
+    function setup() {
+      const valueServiceSpy =
+        jasmine.createSpyObj('ValueService', ['getValue']);
+      const stubValue = 'stub value';
+      const masterService = new MasterService(valueServiceSpy);
+
+      valueServiceSpy.getValue.and.returnValue(stubValue);
+      return { masterService, stubValue, valueServiceSpy };
+    }
+    // #enddocregion no-before-each-setup
+  });
+
+  // #docregion ReversePipe
+
+  describe('ReversePipe', () => {
+    let pipe: ReversePipe;
+
+    beforeEach(() => { pipe = new ReversePipe(); });
+
+    it('transforms "abc" to "cba"', () => {
+      expect(pipe.transform('abc')).toBe('cba');
+    });
+
+    it('no change to palindrome: "able was I ere I saw elba"', () => {
+      const palindrome = 'able was I ere I saw elba';
+      expect(pipe.transform(palindrome)).toBe(palindrome);
+    });
+
+  });
+  // #enddocregion ReversePipe
+
+  // #docregion Lightswitch
+  describe('LightswitchComp', () => {
+    it('#clicked() should toggle #isOn', () => {
+      const comp = new LightswitchComponent();
+      expect(comp.isOn).toBe(false, 'off at first');
+      comp.clicked();
+      expect(comp.isOn).toBe(true, 'on after click');
+      comp.clicked();
+      expect(comp.isOn).toBe(false, 'off after second click');
+    });
+
+    it('#clicked() should set #message to "is on"', () => {
+      const comp = new LightswitchComponent();
+      expect(comp.message).toMatch(/is off/i, 'off at first');
+      comp.clicked();
+      expect(comp.message).toMatch(/is on/i, 'on after clicked');
+    });
+  });
+  // #enddocregion Lightswitch
+
+});

aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts

@@ -0,0 +1,706 @@
+// #docplaster
+import {
+  DemoModule,
+  BankAccountComponent, BankAccountParentComponent,
+  LightswitchComponent,
+  Child1Component, Child2Component, Child3Component,
+  MasterService,
+  ValueService,
+  ExternalTemplateComponent,
+  InputComponent,
+  IoComponent, IoParentComponent,
+  MyIfComponent, MyIfChildComponent, MyIfParentComponent,
+  NeedsContentComponent, ParentComponent,
+  TestProvidersComponent, TestViewProvidersComponent,
+  ReversePipeComponent, ShellComponent
+} from './demo';
+
+import { By }          from '@angular/platform-browser';
+import { Component,
+         DebugElement,
+         Injectable }  from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+// Forms symbols imported only for a specific test below
+import { NgModel, NgControl } from '@angular/forms';
+
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick
+} from '@angular/core/testing';
+
+import { addMatchers, newEvent, click } from '../../testing';
+
+export class NotProvided extends ValueService { /* example below */}
+beforeEach( addMatchers );
+
+describe('demo (with TestBed):', () => {
+
+////////  Service Tests  /////////////
+
+  // #docregion ValueService
+  describe('ValueService', () => {
+
+    // #docregion value-service-before-each
+    let service: ValueService;
+
+    // #docregion value-service-inject-before-each
+    beforeEach(() => {
+      TestBed.configureTestingModule({ providers: [ValueService] });
+      // #enddocregion value-service-before-each
+      service = TestBed.get(ValueService);
+      // #docregion value-service-before-each
+    });
+    // #enddocregion value-service-before-each, value-service-inject-before-each
+
+    // #docregion value-service-inject-it
+    it('should use ValueService', () => {
+      service = TestBed.get(ValueService);
+      expect(service.getValue()).toBe('real value');
+    });
+    // #enddocregion value-service-inject-it
+
+    it('can inject a default value when service is not provided', () => {
+      // #docregion testbed-get-w-null
+      service = TestBed.get(NotProvided, null); // service is null
+      // #enddocregion testbed-get-w-null
+    });
+
+    it('test should wait for ValueService.getPromiseValue', async(() => {
+      service.getPromiseValue().then(
+        value => expect(value).toBe('promise value')
+      );
+    }));
+
+    it('test should wait for ValueService.getObservableValue', async(() => {
+      service.getObservableValue().subscribe(
+        value => expect(value).toBe('observable value')
+      );
+    }));
+
+    // Must use done. See https://github.com/angular/angular/issues/10127
+    it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {
+      service.getObservableDelayValue().subscribe(value => {
+        expect(value).toBe('observable delay value');
+        done();
+      });
+    });
+
+    it('should allow the use of fakeAsync', fakeAsync(() => {
+      let value: any;
+      service.getPromiseValue().then((val: any) => value = val);
+      tick(); // Trigger JS engine cycle until all promises resolve.
+      expect(value).toBe('promise value');
+    }));
+  });
+  // #enddocregion ValueService
+
+  describe('MasterService', () => {
+    // #docregion master-service-before-each
+    let masterService: MasterService;
+    let valueServiceSpy: jasmine.SpyObj<ValueService>;
+
+    beforeEach(() => {
+      const spy = jasmine.createSpyObj('ValueService', ['getValue']);
+
+      TestBed.configureTestingModule({
+        // Provide both the service-to-test and its (spy) dependency
+        providers: [
+          MasterService,
+          { provide: ValueService, useValue: spy }
+        ]
+      });
+      // Inject both the service-to-test and its (spy) dependency
+      masterService = TestBed.get(MasterService);
+      valueServiceSpy = TestBed.get(ValueService);
+    });
+    // #enddocregion master-service-before-each
+
+    // #docregion master-service-it
+    it('#getValue should return stubbed value from a spy', () => {
+      const stubValue = 'stub value';
+      valueServiceSpy.getValue.and.returnValue(stubValue);
+
+      expect(masterService.getValue())
+        .toBe(stubValue, 'service returned stub value');
+      expect(valueServiceSpy.getValue.calls.count())
+        .toBe(1, 'spy method was called once');
+      expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
+        .toBe(stubValue);
+    });
+    // #enddocregion master-service-it
+  });
+
+  describe('use inject within `it`', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({ providers: [ValueService] });
+    });
+
+    it('should use modified providers',
+      inject([ValueService], (service: ValueService) => {
+        service.setValue('value modified in beforeEach');
+        expect(service.getValue())
+          .toBe('value modified in beforeEach');
+      })
+    );
+  });
+
+  describe('using async(inject) within beforeEach', () => {
+    let serviceValue: string;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({ providers: [ValueService] });
+    });
+
+    beforeEach(async(inject([ValueService], (service: ValueService) => {
+      service.getPromiseValue().then(value => serviceValue = value);
+    })));
+
+    it('should use asynchronously modified value ... in synchronous test', () => {
+      expect(serviceValue).toBe('promise value');
+    });
+  });
+
+/////////// Component Tests //////////////////
+
+  describe('TestBed component tests', () => {
+
+    beforeEach(async(() => {
+      TestBed
+        .configureTestingModule({
+          imports: [DemoModule],
+        })
+        // Compile everything in DemoModule
+        .compileComponents();
+    }));
+
+    it('should create a component with inline template', () => {
+      const fixture = TestBed.createComponent(Child1Component);
+      fixture.detectChanges();
+
+      expect(fixture).toHaveText('Child');
+    });
+
+    it('should create a component with external template', () => {
+      const fixture = TestBed.createComponent(ExternalTemplateComponent);
+      fixture.detectChanges();
+
+      expect(fixture).toHaveText('from external template');
+    });
+
+    it('should allow changing members of the component', () => {
+      const fixture = TestBed.createComponent(MyIfComponent);
+
+      fixture.detectChanges();
+      expect(fixture).toHaveText('MyIf()');
+
+      fixture.componentInstance.showMore = true;
+      fixture.detectChanges();
+      expect(fixture).toHaveText('MyIf(More)');
+    });
+
+    it('should create a nested component bound to inputs/outputs', () => {
+      const fixture = TestBed.createComponent(IoParentComponent);
+
+      fixture.detectChanges();
+      const heroes = fixture.debugElement.queryAll(By.css('.hero'));
+      expect(heroes.length).toBeGreaterThan(0, 'has heroes');
+
+      const comp = fixture.componentInstance;
+      const hero = comp.heroes[0];
+
+      click(heroes[0]);
+      fixture.detectChanges();
+
+      const selected = fixture.debugElement.query(By.css('p'));
+      expect(selected).toHaveText(hero.name);
+    });
+
+    it('can access the instance variable of an `*ngFor` row component', () => {
+      const fixture = TestBed.createComponent(IoParentComponent);
+      const comp = fixture.componentInstance;
+      const heroName = comp.heroes[0].name; // first hero's name
+
+      fixture.detectChanges();
+      const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
+
+      const hero = ngForRow.context['hero']; // the hero object passed into the row
+      expect(hero.name).toBe(heroName, 'ngRow.context.hero');
+
+      const rowComp = ngForRow.componentInstance;
+      // jasmine.any is an "instance-of-type" test.
+      expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp');
+      expect(rowComp.hero.name).toBe(heroName, 'component.hero');
+    });
+
+
+    // #docregion ButtonComp
+    it('should support clicking a button', () => {
+      const fixture = TestBed.createComponent(LightswitchComponent);
+      const btn  = fixture.debugElement.query(By.css('button'));
+      const span = fixture.debugElement.query(By.css('span')).nativeElement;
+
+      fixture.detectChanges();
+      expect(span.textContent).toMatch(/is off/i, 'before click');
+
+      click(btn);
+      fixture.detectChanges();
+      expect(span.textContent).toMatch(/is on/i, 'after click');
+    });
+    // #enddocregion ButtonComp
+
+    // ngModel is async so we must wait for it with promise-based `whenStable`
+    it('should support entering text in input box (ngModel)', async(() => {
+      const expectedOrigName = 'John';
+      const expectedNewName = 'Sally';
+
+      const fixture = TestBed.createComponent(InputComponent);
+      fixture.detectChanges();
+
+      const comp = fixture.componentInstance;
+      const input = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
+
+      expect(comp.name).toBe(expectedOrigName,
+        `At start name should be ${expectedOrigName} `);
+
+      // wait until ngModel binds comp.name to input box
+      fixture.whenStable().then(() => {
+        expect(input.value).toBe(expectedOrigName,
+          `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+        // simulate user entering new name in input
+        input.value = expectedNewName;
+
+        // that change doesn't flow to the component immediately
+        expect(comp.name).toBe(expectedOrigName,
+          `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+        // dispatch a DOM event so that Angular learns of input value change.
+        // then wait while ngModel pushes input.box value to comp.name
+        input.dispatchEvent(newEvent('input'));
+        return fixture.whenStable();
+      })
+      .then(() => {
+        expect(comp.name).toBe(expectedNewName,
+          `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+      });
+    }));
+
+    // fakeAsync version of ngModel input test enables sync test style
+    // synchronous `tick` replaces asynchronous promise-base `whenStable`
+    it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => {
+      const expectedOrigName = 'John';
+      const expectedNewName = 'Sally';
+
+      const fixture = TestBed.createComponent(InputComponent);
+      fixture.detectChanges();
+
+      const comp =  fixture.componentInstance;
+      const input = <HTMLInputElement> fixture.debugElement.query(By.css('input')).nativeElement;
+
+      expect(comp.name).toBe(expectedOrigName,
+        `At start name should be ${expectedOrigName} `);
+
+      // wait until ngModel binds comp.name to input box
+      tick();
+      expect(input.value).toBe(expectedOrigName,
+        `After ngModel updates input box, input.value should be ${expectedOrigName} `);
+
+      // simulate user entering new name in input
+      input.value = expectedNewName;
+
+      // that change doesn't flow to the component immediately
+      expect(comp.name).toBe(expectedOrigName,
+        `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
+
+      // dispatch a DOM event so that Angular learns of input value change.
+      // then wait a tick while ngModel pushes input.box value to comp.name
+      input.dispatchEvent(newEvent('input'));
+      tick();
+      expect(comp.name).toBe(expectedNewName,
+        `After ngModel updates the model, comp.name should be ${expectedNewName} `);
+    }));
+
+    // #docregion ReversePipeComp
+    it('ReversePipeComp should reverse the input text', fakeAsync(() => {
+      const inputText = 'the quick brown fox.';
+      const expectedText = '.xof nworb kciuq eht';
+
+      const fixture = TestBed.createComponent(ReversePipeComponent);
+      fixture.detectChanges();
+
+      const comp =  fixture.componentInstance;
+      const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
+      const span =  fixture.debugElement.query(By.css('span')).nativeElement  as HTMLElement;
+
+      // simulate user entering new name in input
+      input.value = inputText;
+
+      // dispatch a DOM event so that Angular learns of input value change.
+      // then wait a tick while ngModel pushes input.box value to comp.text
+      // and Angular updates the output span
+      input.dispatchEvent(newEvent('input'));
+      tick();
+      fixture.detectChanges();
+      expect(span.textContent).toBe(expectedText, 'output span');
+      expect(comp.text).toBe(inputText, 'component.text');
+    }));
+    // #enddocregion ReversePipeComp
+
+    // Use this technique to find attached directives of any kind
+    it('can examine attached directives and listeners', () => {
+      const fixture = TestBed.createComponent(InputComponent);
+      fixture.detectChanges();
+
+      const inputEl = fixture.debugElement.query(By.css('input'));
+
+      expect(inputEl.providerTokens).toContain(NgModel, 'NgModel directive');
+
+      const ngControl = inputEl.injector.get(NgControl);
+      expect(ngControl).toEqual(jasmine.any(NgControl), 'NgControl directive');
+
+      expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached');
+    });
+
+    // #docregion dom-attributes
+    it('BankAccountComponent should set attributes, styles, classes, and properties', () => {
+      const fixture = TestBed.createComponent(BankAccountParentComponent);
+      fixture.detectChanges();
+      const comp = fixture.componentInstance;
+
+      // the only child is debugElement of the BankAccount component
+      const el = fixture.debugElement.children[0];
+      const childComp = el.componentInstance as BankAccountComponent;
+      expect(childComp).toEqual(jasmine.any(BankAccountComponent));
+
+      expect(el.context).toBe(childComp, 'context is the child component');
+
+      expect(el.attributes['account']).toBe(childComp.id, 'account attribute');
+      expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute');
+
+      expect(el.classes['closed']).toBe(true, 'closed class');
+      expect(el.classes['open']).toBe(false, 'open class');
+
+      expect(el.styles['color']).toBe(comp.color, 'color style');
+      expect(el.styles['width']).toBe(comp.width + 'px', 'width style');
+    // #enddocregion dom-attributes
+
+      // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
+      // expect(el.properties['customProperty']).toBe(true, 'customProperty');
+
+    // #docregion dom-attributes
+    });
+    // #enddocregion dom-attributes
+
+
+  });
+
+  describe('TestBed component overrides:', () => {
+
+    it('should override ChildComp\'s template', () => {
+
+      const fixture = TestBed.configureTestingModule({
+        declarations: [Child1Component],
+      })
+      .overrideComponent(Child1Component, {
+        set: { template: '<span>Fake</span>' }
+      })
+      .createComponent(Child1Component);
+
+      fixture.detectChanges();
+      expect(fixture).toHaveText('Fake');
+    });
+
+    it('should override TestProvidersComp\'s ValueService provider', () => {
+      const fixture = TestBed.configureTestingModule({
+        declarations: [TestProvidersComponent],
+      })
+      .overrideComponent(TestProvidersComponent, {
+        remove: { providers: [ValueService]},
+        add:    { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+
+        // Or replace them all (this component has only one provider)
+        // set:    { providers: [{ provide: ValueService, useClass: FakeValueService }] },
+      })
+      .createComponent(TestProvidersComponent);
+
+      fixture.detectChanges();
+      expect(fixture).toHaveText('injected value: faked value', 'text');
+
+      // Explore the providerTokens
+      const tokens = fixture.debugElement.providerTokens;
+      expect(tokens).toContain(fixture.componentInstance.constructor, 'component ctor');
+      expect(tokens).toContain(TestProvidersComponent, 'TestProvidersComp');
+      expect(tokens).toContain(ValueService, 'ValueService');
+    });
+
+    it('should override TestViewProvidersComp\'s ValueService viewProvider', () => {
+      const fixture = TestBed.configureTestingModule({
+        declarations: [TestViewProvidersComponent],
+      })
+      .overrideComponent(TestViewProvidersComponent, {
+        // remove: { viewProviders: [ValueService]},
+        // add:    { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+
+        // Or replace them all (this component has only one viewProvider)
+        set:    { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
+      })
+      .createComponent(TestViewProvidersComponent);
+
+      fixture.detectChanges();
+      expect(fixture).toHaveText('injected value: faked value');
+    });
+
+    it('injected provider should not be same as component\'s provider', () => {
+
+      // TestComponent is parent of TestProvidersComponent
+      @Component({ template: '<my-service-comp></my-service-comp>' })
+      class TestComponent {}
+
+      // 3 levels of ValueService provider: module, TestCompomponent, TestProvidersComponent
+      const fixture = TestBed.configureTestingModule({
+        declarations: [TestComponent, TestProvidersComponent],
+        providers:    [ValueService]
+      })
+      .overrideComponent(TestComponent, {
+        set: { providers: [{ provide: ValueService, useValue: {} }] }
+      })
+      .overrideComponent(TestProvidersComponent, {
+        set: { providers: [{ provide: ValueService, useClass: FakeValueService }] }
+      })
+      .createComponent(TestComponent);
+
+      let testBedProvider: ValueService;
+      let tcProvider: ValueService;
+      let tpcProvider: FakeValueService;
+
+      // `inject` uses TestBed's injector
+      inject([ValueService], (s: ValueService) => testBedProvider = s)();
+      tcProvider = fixture.debugElement.injector.get(ValueService) as ValueService;
+      tpcProvider = fixture.debugElement.children[0].injector.get(ValueService) as FakeValueService;
+
+      expect(testBedProvider).not.toBe(tcProvider, 'testBed/tc not same providers');
+      expect(testBedProvider).not.toBe(tpcProvider, 'testBed/tpc not same providers');
+
+      expect(testBedProvider instanceof ValueService).toBe(true, 'testBedProvider is ValueService');
+      expect(tcProvider).toEqual({} as ValueService, 'tcProvider is {}');
+      expect(tpcProvider instanceof FakeValueService).toBe(true, 'tpcProvider is FakeValueService');
+    });
+
+    it('can access template local variables as references', () => {
+      const fixture = TestBed.configureTestingModule({
+        declarations: [ShellComponent, NeedsContentComponent, Child1Component, Child2Component, Child3Component],
+      })
+      .overrideComponent(ShellComponent, {
+        set: {
+          selector: 'test-shell',
+          template: `
+          <needs-content #nc>
+            <child-1 #content text="My"></child-1>
+            <child-2 #content text="dog"></child-2>
+            <child-2 text="has"></child-2>
+            <child-3 #content text="fleas"></child-3>
+            <div #content>!</div>
+          </needs-content>
+          `
+        }
+      })
+      .createComponent(ShellComponent);
+
+      fixture.detectChanges();
+
+      // NeedsContentComp is the child of ShellComp
+      const el = fixture.debugElement.children[0];
+      const comp = el.componentInstance;
+
+      expect(comp.children.toArray().length).toBe(4,
+        'three different child components and an ElementRef with #content');
+
+      expect(el.references['nc']).toBe(comp, '#nc reference to component');
+
+      // #docregion custom-predicate
+      // Filter for DebugElements with a #content reference
+      const contentRefs = el.queryAll( de => de.references['content']);
+      // #enddocregion custom-predicate
+      expect(contentRefs.length).toBe(4, 'elements w/ a #content reference');
+    });
+
+  });
+
+  describe('nested (one-deep) component override', () => {
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [ParentComponent, FakeChildComponent]
+      });
+    });
+
+    it('ParentComp should use Fake Child component', () => {
+      const fixture = TestBed.createComponent(ParentComponent);
+      fixture.detectChanges();
+      expect(fixture).toHaveText('Parent(Fake Child)');
+    });
+  });
+
+  describe('nested (two-deep) component override', () => {
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        declarations: [ParentComponent, FakeChildWithGrandchildComponent, FakeGrandchildComponent]
+      });
+    });
+
+    it('should use Fake Grandchild component', () => {
+      const fixture = TestBed.createComponent(ParentComponent);
+      fixture.detectChanges();
+      expect(fixture).toHaveText('Parent(Fake Child(Fake Grandchild))');
+    });
+  });
+
+  describe('lifecycle hooks w/ MyIfParentComp', () => {
+    let fixture: ComponentFixture<MyIfParentComponent>;
+    let parent:  MyIfParentComponent;
+    let child:   MyIfChildComponent;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [FormsModule],
+        declarations: [MyIfChildComponent, MyIfParentComponent]
+      });
+
+      fixture = TestBed.createComponent(MyIfParentComponent);
+      parent = fixture.componentInstance;
+    });
+
+    it('should instantiate parent component', () => {
+      expect(parent).not.toBeNull('parent component should exist');
+    });
+
+    it('parent component OnInit should NOT be called before first detectChanges()', () => {
+      expect(parent.ngOnInitCalled).toBe(false);
+    });
+
+    it('parent component OnInit should be called after first detectChanges()', () => {
+      fixture.detectChanges();
+      expect(parent.ngOnInitCalled).toBe(true);
+    });
+
+    it('child component should exist after OnInit', () => {
+      fixture.detectChanges();
+      getChild();
+      expect(child instanceof MyIfChildComponent).toBe(true, 'should create child');
+    });
+
+    it('should have called child component\'s OnInit ', () => {
+      fixture.detectChanges();
+      getChild();
+      expect(child.ngOnInitCalled).toBe(true);
+    });
+
+    it('child component called OnChanges once', () => {
+      fixture.detectChanges();
+      getChild();
+      expect(child.ngOnChangesCounter).toBe(1);
+    });
+
+    it('changed parent value flows to child', () => {
+      fixture.detectChanges();
+      getChild();
+
+      parent.parentValue = 'foo';
+      fixture.detectChanges();
+
+      expect(child.ngOnChangesCounter).toBe(2,
+        'expected 2 changes: initial value and changed value');
+      expect(child.childValue).toBe('foo',
+        'childValue should eq changed parent value');
+    });
+
+    // must be async test to see child flow to parent
+    it('changed child value flows to parent', async(() => {
+      fixture.detectChanges();
+      getChild();
+
+      child.childValue = 'bar';
+
+      return new Promise(resolve => {
+        // Wait one JS engine turn!
+        setTimeout(() => resolve(), 0);
+      })
+      .then(() => {
+        fixture.detectChanges();
+
+        expect(child.ngOnChangesCounter).toBe(2,
+          'expected 2 changes: initial value and changed value');
+        expect(parent.parentValue).toBe('bar',
+          'parentValue should eq changed parent value');
+      });
+
+    }));
+
+    it('clicking "Close Child" triggers child OnDestroy', () => {
+      fixture.detectChanges();
+      getChild();
+
+      const btn = fixture.debugElement.query(By.css('button'));
+      click(btn);
+
+      fixture.detectChanges();
+      expect(child.ngOnDestroyCalled).toBe(true);
+    });
+
+    ////// helpers ///
+    /**
+     * Get the MyIfChildComp from parent; fail w/ good message if cannot.
+     */
+    function getChild() {
+
+      let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp
+
+      // The Hard Way: requires detailed knowledge of the parent template
+      try {
+        childDe = fixture.debugElement.children[4].children[0];
+      } catch (err) { /* we'll report the error */ }
+
+      // DebugElement.queryAll: if we wanted all of many instances:
+      childDe = fixture.debugElement
+        .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComponent; })[0];
+
+      // WE'LL USE THIS APPROACH !
+      // DebugElement.query: find first instance (if any)
+      childDe = fixture.debugElement
+        .query(function (de) { return de.componentInstance instanceof MyIfChildComponent; });
+
+      if (childDe && childDe.componentInstance) {
+        child = childDe.componentInstance;
+      } else {
+        fail('Unable to find MyIfChildComp within MyIfParentComp');
+      }
+
+      return child;
+    }
+  });
+
+});
+////////// Fakes ///////////
+
+@Component({
+  selector: 'child-1',
+  template: `Fake Child`
+})
+class FakeChildComponent { }
+
+@Component({
+  selector: 'child-1',
+  template: `Fake Child(<grandchild-1></grandchild-1>)`
+})
+class FakeChildWithGrandchildComponent { }
+
+@Component({
+  selector: 'grandchild-1',
+  template: `Fake Grandchild`
+})
+class FakeGrandchildComponent { }
+
+@Injectable()
+class FakeValueService extends ValueService {
+  value = 'faked value';
+}

aio/content/examples/testing/src/app/demo/demo.ts

@@ -6,9 +6,8 @@ import { Component, ContentChildren, Directive, EventEmitter,
          Pipe, PipeTransform,
          SimpleChange } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/delay';
+import { of } from 'rxjs/observable/of';
+import { delay } from 'rxjs/operators';
 
 ////////// The App: Services and Components for the tests. //////////////
 
@@ -17,37 +16,31 @@ export class Hero {
 }
 
 ////////// Services ///////////////
-// #docregion FancyService
+// #docregion ValueService
 @Injectable()
-export class FancyService {
+export class ValueService {
   protected value = 'real value';
 
   getValue() { return this.value; }
   setValue(value: string) { this.value = value; }
 
-  getAsyncValue() { return Promise.resolve('async value'); }
+  getObservableValue() { return of('observable value'); }
 
-  getObservableValue() { return Observable.of('observable value'); }
-
-  getTimeoutValue() {
-    return new Promise((resolve) => {
-      setTimeout(() => { resolve('timeout value'); }, 10);
-    });
-  }
+  getPromiseValue() { return Promise.resolve('promise value'); }
 
   getObservableDelayValue() {
-    return Observable.of('observable delay value').delay(10);
+    return of('observable delay value').pipe(delay(10));
   }
 }
-// #enddocregion FancyService
+// #enddocregion ValueService
 
-// #docregion DependentService
+// #docregion MasterService
 @Injectable()
-export class DependentService {
-  constructor(private dependentService: FancyService) { }
-  getValue() { return this.dependentService.getValue(); }
+export class MasterService {
+  constructor(private valueService: ValueService) { }
+  getValue() { return this.valueService.getValue(); }
 }
-// #enddocregion DependentService
+// #enddocregion MasterService
 
 /////////// Pipe ////////////////
 /*
@@ -102,19 +95,19 @@ export class BankAccountParentComponent {
   isClosed = true;
 }
 
-// #docregion ButtonComp
+// #docregion LightswitchComp
 @Component({
-  selector: 'button-comp',
+  selector: 'lightswitch-comp',
   template: `
     <button (click)="clicked()">Click me!</button>
     <span>{{message}}</span>`
 })
-export class ButtonComponent {
+export class LightswitchComponent {
   isOn = false;
   clicked() { this.isOn = !this.isOn; }
   get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
 }
-// #enddocregion ButtonComp
+// #enddocregion LightswitchComp
 
 @Component({
   selector: 'child-1',
@@ -231,31 +224,31 @@ export class MyIfComponent {
 
 @Component({
   selector: 'my-service-comp',
-  template: `injected value: {{fancyService.value}}`,
-  providers: [FancyService]
+  template: `injected value: {{valueService.value}}`,
+  providers: [ValueService]
 })
 export class TestProvidersComponent {
-  constructor(public fancyService: FancyService) {}
+  constructor(public valueService: ValueService) {}
 }
 
 
 @Component({
   selector: 'my-service-comp',
-  template: `injected value: {{fancyService.value}}`,
-  viewProviders: [FancyService]
+  template: `injected value: {{valueService.value}}`,
+  viewProviders: [ValueService]
 })
 export class TestViewProvidersComponent {
-  constructor(public fancyService: FancyService) {}
+  constructor(public valueService: ValueService) {}
 }
 
 @Component({
   selector: 'external-template-comp',
-  templateUrl: './bag-external-template.html'
+  templateUrl: './demo-external-template.html'
 })
 export class ExternalTemplateComponent implements OnInit {
   serviceValue: string;
 
-  constructor(@Optional() private service: FancyService) {  }
+  constructor(@Optional() private service: ValueService) {  }
 
   ngOnInit() {
     if (this.service) { this.serviceValue = this.service.getValue(); }
@@ -376,9 +369,9 @@ export class ReversePipeComponent {
 export class ShellComponent { }
 
 @Component({
-  selector: 'bag-comp',
+  selector: 'demo-comp',
   template: `
-    <h1>Specs Bag</h1>
+    <h1>Specs Demo</h1>
     <my-if-parent-comp></my-if-parent-comp>
     <hr>
     <h3>Input/Output Component</h3>
@@ -397,7 +390,7 @@ export class ShellComponent { }
     <input-value-comp></input-value-comp>
     <hr>
     <h3>Button Component</h3>
-    <button-comp></button-comp>
+    <lightswitch-comp></lightswitch-comp>
     <hr>
     <h3>Needs Content</h3>
     <needs-content #nc>
@@ -409,13 +402,13 @@ export class ShellComponent { }
     </needs-content>
   `
 })
-export class BagComponent { }
+export class DemoComponent { }
 //////// Aggregations ////////////
 
-export const bagDeclarations = [
-  BagComponent,
+export const demoDeclarations = [
+  DemoComponent,
   BankAccountComponent, BankAccountParentComponent,
-  ButtonComponent,
+  LightswitchComponent,
   Child1Component, Child2Component, Child3Component,
   ExternalTemplateComponent, InnerCompWithExternalTemplateComponent,
   InputComponent,
@@ -427,7 +420,7 @@ export const bagDeclarations = [
   ReversePipe, ReversePipeComponent, ShellComponent
 ];
 
-export const bagProviders = [DependentService, FancyService];
+export const demoProviders = [MasterService, ValueService];
 
 ////////////////////
 ////////////
@@ -437,10 +430,10 @@ import { FormsModule }   from '@angular/forms';
 
 @NgModule({
   imports: [BrowserModule, FormsModule],
-  declarations: bagDeclarations,
-  providers:    bagProviders,
-  entryComponents: [BagComponent],
-  bootstrap:       [BagComponent]
+  declarations: demoDeclarations,
+  providers:    demoProviders,
+  entryComponents: [DemoComponent],
+  bootstrap:       [DemoComponent]
 })
-export class BagModule { }
+export class DemoModule { }
 

aio/content/examples/testing/src/app/dummy.module.ts

@@ -0,0 +1,15 @@
+// These unused NgModules keep the Angular Language Service happy.
+// The AppModule registers the final versions of these components
+import { NgModule } from '@angular/core';
+
+import { AppComponent as app_initial } from './app-initial.component';
+@NgModule({ declarations: [ app_initial ] })
+export class AppModuleInitial {}
+
+import { BannerComponent as bc_initial } from './banner/banner-initial.component';
+@NgModule({ declarations: [ bc_initial ] })
+export class BannerModuleInitial {}
+
+import { BannerComponent as bc_external } from './banner/banner-external.component';
+@NgModule({ declarations: [ bc_external ] })
+export class BannerModuleExternal {}

aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts

@@ -1,7 +1,7 @@
-import { HeroDetailComponent } from './hero-detail.component';
-import { Hero }                from '../model';
+import { asyncData, ActivatedRouteStub } from '../../testing';
 
-import { ActivatedRouteStub }  from '../../testing';
+import { HeroDetailComponent } from './hero-detail.component';
+import { Hero }                from '../model/hero';
 
 //////////  Tests  ////////////////////
 
@@ -12,22 +12,21 @@ describe('HeroDetailComponent - no TestBed', () => {
   let hds: any;
   let router: any;
 
-  beforeEach((done: any) => {
-    expectedHero = new Hero(42, 'Bubba');
-    activatedRoute = new ActivatedRouteStub();
-    activatedRoute.testParamMap = { id: expectedHero.id };
-
+  beforeEach((done: DoneFn) => {
+    expectedHero = {id: 42, name: 'Bubba' };
+    const activatedRoute = new ActivatedRouteStub({ id: expectedHero.id });
     router = jasmine.createSpyObj('router', ['navigate']);
 
     hds = jasmine.createSpyObj('HeroDetailService', ['getHero', 'saveHero']);
-    hds.getHero.and.returnValue(Promise.resolve(expectedHero));
-    hds.saveHero.and.returnValue(Promise.resolve(expectedHero));
+    hds.getHero.and.returnValue(asyncData(expectedHero));
+    hds.saveHero.and.returnValue(asyncData(expectedHero));
 
     comp = new HeroDetailComponent(hds, <any> activatedRoute, router);
     comp.ngOnInit();
 
     // OnInit calls HDS.getHero; wait for it to get the fake hero
-    hds.getHero.calls.first().returnValue.then(done);
+    hds.getHero.calls.first().returnValue.subscribe(done);
+
   });
 
   it('should expose the hero retrieved from the service', () => {
@@ -45,11 +44,11 @@ describe('HeroDetailComponent - no TestBed', () => {
     expect(router.navigate.calls.any()).toBe(false, 'router.navigate not called yet');
   });
 
-  it('should navigate when click save resolves', (done: any) => {
+  it('should navigate when click save resolves', (done: DoneFn) => {
     comp.save();
     // waits for async save to complete before navigating
     hds.saveHero.calls.first().returnValue
-    .then(() => {
+    .subscribe(() => {
       expect(router.navigate.calls.any()).toBe(true, 'router.navigate called');
       done();
     });

aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts

@@ -3,21 +3,20 @@ import {
   async, ComponentFixture, fakeAsync, inject, TestBed, tick
 } from '@angular/core/testing';
 
-import { By }           from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { Router }       from '@angular/router';
 
 import {
-  ActivatedRoute, ActivatedRouteStub, click, newEvent, Router, RouterStub
+  ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent
 } from '../../testing';
 
-import { Hero }                from '../model';
+import { Hero }                from '../model/hero';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroDetailService }   from './hero-detail.service';
 import { HeroModule }          from './hero.module';
 
 ////// Testing Vars //////
 let activatedRoute: ActivatedRouteStub;
-let comp: HeroDetailComponent;
+let component: HeroDetailComponent;
 let fixture: ComponentFixture<HeroDetailComponent>;
 let page: Page;
 
@@ -32,36 +31,38 @@ describe('HeroDetailComponent', () => {
   describe('with SharedModule setup', sharedModuleSetup);
 });
 
-////////////////////
+///////////////////
+
 function overrideSetup() {
   // #docregion hds-spy
   class HeroDetailServiceSpy {
-    testHero = new Hero(42, 'Test Hero');
+    testHero: Hero = {id: 42, name: 'Test Hero' };
 
+    /* emit cloned test hero */
     getHero = jasmine.createSpy('getHero').and.callFake(
-      () => Promise
-        .resolve(true)
-        .then(() => Object.assign({}, this.testHero))
+      () => asyncData(Object.assign({}, this.testHero))
     );
 
+    /* emit clone of test hero, with changes merged in */
     saveHero = jasmine.createSpy('saveHero').and.callFake(
-      (hero: Hero) => Promise
-        .resolve(true)
-        .then(() => Object.assign(this.testHero, hero))
+      (hero: Hero) => asyncData(Object.assign(this.testHero, hero))
     );
   }
+
   // #enddocregion hds-spy
 
   // the `id` value is irrelevant because ignored by service stub
-  beforeEach(() => activatedRoute.testParamMap = { id: 99999 } );
+  beforeEach(() => activatedRoute.setParamMap({ id: 99999 }));
 
   // #docregion setup-override
-  beforeEach( async(() => {
+  beforeEach(async(() => {
+    const routerSpy = createRouterSpy();
+
     TestBed.configureTestingModule({
       imports:   [ HeroModule ],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRoute },
-        { provide: Router,         useClass: RouterStub},
+        { provide: Router,         useValue: routerSpy},
   // #enddocregion setup-override
         // HeroDetailService at this level is IRRELEVANT!
         { provide: HeroDetailService, useValue: {} }
@@ -87,7 +88,7 @@ function overrideSetup() {
   // #docregion override-tests
   let hdsSpy: HeroDetailServiceSpy;
 
-  beforeEach( async(() => {
+  beforeEach(async(() => {
     createComponent();
     // get the component's injected HeroDetailServiceSpy
     hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
@@ -108,7 +109,7 @@ function overrideSetup() {
     page.nameInput.value = newName;
     page.nameInput.dispatchEvent(newEvent('input')); // tell Angular
 
-    expect(comp.hero.name).toBe(newName, 'component hero has new name');
+    expect(component.hero.name).toBe(newName, 'component hero has new name');
     expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save');
 
     click(page.saveBtn);
@@ -116,36 +117,40 @@ function overrideSetup() {
 
     tick(); // wait for async save to complete
     expect(hdsSpy.testHero.name).toBe(newName, 'service hero has new name after save');
-    expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+    expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
   }));
   // #enddocregion override-tests
 
   it('fixture injected service is not the component injected service',
-    inject([HeroDetailService], (service: HeroDetailService) => {
+    // inject gets the service from the fixture
+    inject([HeroDetailService], (fixtureService: HeroDetailService) => {
 
-    expect(service).toEqual(<any> {}, 'service injected from fixture');
-    expect(hdsSpy).toBeTruthy('service injected into component');
+    // use `fixture.debugElement.injector` to get service from component
+    const componentService = fixture.debugElement.injector.get(HeroDetailService);
+
+    expect(fixtureService).not.toBe(componentService, 'service injected from fixture');
   }));
 }
 
 ////////////////////
-import { HEROES, FakeHeroService } from '../model/testing';
-import { HeroService }             from '../model';
+import { getTestHeroes, TestHeroService, HeroService } from '../model/testing/test-hero.service';
 
-const firstHero = HEROES[0];
+const firstHero = getTestHeroes()[0];
 
 function heroModuleSetup() {
   // #docregion setup-hero-module
-  beforeEach( async(() => {
-     TestBed.configureTestingModule({
+  beforeEach(async(() => {
+    const routerSpy = createRouterSpy();
+
+    TestBed.configureTestingModule({
       imports:   [ HeroModule ],
   // #enddocregion setup-hero-module
   //  declarations: [ HeroDetailComponent ], // NO!  DOUBLE DECLARATION
   // #docregion setup-hero-module
       providers: [
         { provide: ActivatedRoute, useValue: activatedRoute },
-        { provide: HeroService,    useClass: FakeHeroService },
-        { provide: Router,         useClass: RouterStub},
+        { provide: HeroService,    useClass: TestHeroService },
+        { provide: Router,         useValue: routerSpy},
       ]
     })
     .compileComponents();
@@ -156,9 +161,9 @@ function heroModuleSetup() {
   describe('when navigate to existing hero', () => {
     let expectedHero: Hero;
 
-    beforeEach( async(() => {
+    beforeEach(async(() => {
       expectedHero = firstHero;
-      activatedRoute.testParamMap = { id: expectedHero.id };
+      activatedRoute.setParamMap({ id: expectedHero.id });
       createComponent();
     }));
 
@@ -170,7 +175,7 @@ function heroModuleSetup() {
 
     it('should navigate when click cancel', () => {
       click(page.cancelBtn);
-      expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+      expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
     });
 
     it('should save when click save but not navigate immediately', () => {
@@ -181,30 +186,32 @@ function heroModuleSetup() {
 
       click(page.saveBtn);
       expect(saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called');
-      expect(page.navSpy.calls.any()).toBe(false, 'router.navigate not called');
+      expect(page.navigateSpy.calls.any()).toBe(false, 'router.navigate not called');
     });
 
     it('should navigate when click save and save resolves', fakeAsync(() => {
       click(page.saveBtn);
       tick(); // wait for async save to complete
-      expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+      expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
     }));
 
     // #docregion title-case-pipe
     it('should convert hero name to Title Case', () => {
-      const inputName = 'quick BROWN  fox';
-      const titleCaseName = 'Quick Brown  Fox';
+      // get the name's input and display elements from the DOM
+      const hostElement = fixture.nativeElement;
+      const nameInput: HTMLInputElement = hostElement.querySelector('input');
+      const nameDisplay: HTMLElement = hostElement.querySelector('span');
 
-      // simulate user entering new name into the input box
-      page.nameInput.value = inputName;
+      // simulate user entering a new name into the input box
+      nameInput.value = 'quick BROWN  fOx';
 
       // dispatch a DOM event so that Angular learns of input value change.
-      page.nameInput.dispatchEvent(newEvent('input'));
+      nameInput.dispatchEvent(newEvent('input'));
 
-      // Tell Angular to update the output span through the title pipe
+      // Tell Angular to update the display binding through the title pipe
       fixture.detectChanges();
 
-      expect(page.nameDisplay.textContent).toBe(titleCaseName);
+      expect(nameDisplay.textContent).toBe('Quick Brown  Fox');
     });
     // #enddocregion title-case-pipe
   // #enddocregion selected-tests
@@ -214,10 +221,10 @@ function heroModuleSetup() {
 
   // #docregion route-no-id
   describe('when navigate with no hero id', () => {
-    beforeEach( async( createComponent ));
+    beforeEach(async( createComponent ));
 
     it('should have hero.id === 0', () => {
-      expect(comp.hero.id).toBe(0);
+      expect(component.hero.id).toBe(0);
     });
 
     it('should display empty hero name', () => {
@@ -228,14 +235,14 @@ function heroModuleSetup() {
 
   // #docregion route-bad-id
   describe('when navigate to non-existent hero id', () => {
-    beforeEach( async(() => {
-      activatedRoute.testParamMap = { id: 99999 };
+    beforeEach(async(() => {
+      activatedRoute.setParamMap({ id: 99999 });
       createComponent();
     }));
 
     it('should try to navigate back to hero list', () => {
-      expect(page.gotoSpy.calls.any()).toBe(true, 'comp.gotoList called');
-      expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
+      expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called');
+      expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
     });
   });
   // #enddocregion route-bad-id
@@ -263,23 +270,25 @@ import { TitleCasePipe }       from '../shared/title-case.pipe';
 
 function formsModuleSetup() {
  // #docregion setup-forms-module
-  beforeEach( async(() => {
-     TestBed.configureTestingModule({
+  beforeEach(async(() => {
+    const routerSpy = createRouterSpy();
+
+    TestBed.configureTestingModule({
       imports:      [ FormsModule ],
       declarations: [ HeroDetailComponent, TitleCasePipe ],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRoute },
-        { provide: HeroService,    useClass: FakeHeroService },
-        { provide: Router,         useClass: RouterStub},
+        { provide: HeroService,    useClass: TestHeroService },
+        { provide: Router,         useValue: routerSpy},
       ]
     })
     .compileComponents();
   }));
   // #enddocregion setup-forms-module
 
-  it('should display 1st hero\'s name', fakeAsync(() => {
+  it('should display 1st hero\'s name', async(() => {
     const expectedHero = firstHero;
-    activatedRoute.testParamMap = { id: expectedHero.id };
+    activatedRoute.setParamMap({ id: expectedHero.id });
     createComponent().then(() => {
       expect(page.nameDisplay.textContent).toBe(expectedHero.name);
     });
@@ -291,23 +300,25 @@ import { SharedModule }        from '../shared/shared.module';
 
 function sharedModuleSetup() {
   // #docregion setup-shared-module
-  beforeEach( async(() => {
+  beforeEach(async(() => {
+    const routerSpy = createRouterSpy();
+
     TestBed.configureTestingModule({
       imports:      [ SharedModule ],
       declarations: [ HeroDetailComponent ],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRoute },
-        { provide: HeroService,    useClass: FakeHeroService },
-        { provide: Router,         useClass: RouterStub},
+        { provide: HeroService,    useClass: TestHeroService },
+        { provide: Router,         useValue: routerSpy},
       ]
     })
     .compileComponents();
   }));
   // #enddocregion setup-shared-module
 
-  it('should display 1st hero\'s name', fakeAsync(() => {
+  it('should display 1st hero\'s name', async(() => {
     const expectedHero = firstHero;
-    activatedRoute.testParamMap = { id: expectedHero.id };
+    activatedRoute.setParamMap({ id: expectedHero.id });
     createComponent().then(() => {
       expect(page.nameDisplay.textContent).toBe(expectedHero.name);
     });
@@ -320,45 +331,51 @@ function sharedModuleSetup() {
 /** Create the HeroDetailComponent, initialize it, set test variables  */
 function createComponent() {
   fixture = TestBed.createComponent(HeroDetailComponent);
-  comp    = fixture.componentInstance;
-  page    = new Page();
+  component = fixture.componentInstance;
+  page = new Page(fixture);
 
   // 1st change detection triggers ngOnInit which gets a hero
   fixture.detectChanges();
   return fixture.whenStable().then(() => {
     // 2nd change detection displays the async-fetched hero
     fixture.detectChanges();
-    page.addPageElements();
   });
 }
 // #enddocregion create-component
 
 // #docregion page
 class Page {
-  gotoSpy:      jasmine.Spy;
-  navSpy:       jasmine.Spy;
+  // getter properties wait to query the DOM until called.
+  get buttons()     { return this.queryAll<HTMLButtonElement>('button'); }
+  get saveBtn()     { return this.buttons[0]; }
+  get cancelBtn()   { return this.buttons[1]; }
+  get nameDisplay() { return this.query<HTMLElement>('span'); }
+  get nameInput()   { return this.query<HTMLInputElement>('input'); }
 
-  saveBtn:      DebugElement;
-  cancelBtn:    DebugElement;
-  nameDisplay:  HTMLElement;
-  nameInput:    HTMLInputElement;
+  gotoListSpy: jasmine.Spy;
+  navigateSpy:  jasmine.Spy;
 
-  constructor() {
-    const router = TestBed.get(Router); // get router from root injector
-    this.gotoSpy = spyOn(comp, 'gotoList').and.callThrough();
-    this.navSpy  = spyOn(router, 'navigate');
+  constructor(fixture: ComponentFixture<HeroDetailComponent>) {
+    // get the navigate spy from the injected router spy object
+    const routerSpy = <any> fixture.debugElement.injector.get(Router);
+    this.navigateSpy = routerSpy.navigate;
+
+    // spy on component's `gotoList()` method
+    const component = fixture.componentInstance;
+    this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough();
   }
 
-  /** Add page elements after hero arrives */
-  addPageElements() {
-    if (comp.hero) {
-      // have a hero so these elements are now in the DOM
-      const buttons    = fixture.debugElement.queryAll(By.css('button'));
-      this.saveBtn     = buttons[0];
-      this.cancelBtn   = buttons[1];
-      this.nameDisplay = fixture.debugElement.query(By.css('span')).nativeElement;
-      this.nameInput   = fixture.debugElement.query(By.css('input')).nativeElement;
-    }
+  //// query helpers ////
+  private query<T>(selector: string): T {
+    return fixture.nativeElement.querySelector(selector);
+  }
+
+  private queryAll<T>(selector: string): T[] {
+    return fixture.nativeElement.querySelectorAll(selector);
   }
 }
 // #enddocregion page
+
+function createRouterSpy() {
+  return jasmine.createSpyObj('Router', ['navigate']);
+}