feat(core): support metadata reflection for native class types (#22356 )

closes #21731 PR Close #22356
fix(forms): set state before emitting a value from ngModelChange (#21514 )
2026-09-14 13:54:52 +08:00 · 2018-02-21 16:09:27 -08:00 · 2018-02-21 15:59:33 -08:00 · 2018-02-21 14:52:04 -08:00 · 2018-02-21 14:51:04 -08:00 · 2018-02-21 11:06:47 -08:00
1031 changed files with 36455 additions and 12329 deletions
@@ -78,6 +78,15 @@ jobs:
      # See https://github.com/bazelbuild/bazel/issues/4257
      - run: bazel query --output=label '//modules/... union //packages/... union //tools/...' | xargs bazel test

+      # CircleCI will allow us to go back and view/download these artifacts from past builds.
+      # Also we can use a service like https://buildsize.org/ to automatically track binary size of these artifacts.
+      - store_artifacts:
+          path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js
+          destination: packages/core/test/bundling/hello_world/bundle.min.js
+      - store_artifacts:
+          path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js.brotli
+          destination: packages/core/test/bundling/hello_world/bundle.min.js.brotli
+
      - save_cache:
          key: *cache_key
          paths:
@@ -207,6 +207,12 @@ groups:
    conditions:
      files:
        - "packages/forms/*"
+        - "aio/content/guide/forms.md"
+        - "aio/content/guide/form-validation.md"
+        - "aio/content/guide/reactive-forms.md"
+        - "aio/content/examples/forms/*"
+        - "aio/content/examples/form-validation/*"
+        - "aio/content/examples/reactive-forms/*"
    users:
      - kara #primary
      - tinayuangao #secondary
@@ -1,31 +1,39 @@
-<a name="5.2.7"></a>
-## [5.2.7](https://github.com/angular/angular/compare/5.2.6...5.2.7) (2018-02-28)
+<a name="6.0.0-beta.4"></a>
+# [6.0.0-beta.4](https://github.com/angular/angular/compare/6.0.0-beta.3...6.0.0-beta.4) (2018-02-14)


 ### 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)
+* **bazel:** allow TS to read ambient typings ([#21876](https://github.com/angular/angular/issues/21876)) ([b081dfe](https://github.com/angular/angular/commit/b081dfe)), closes [#21872](https://github.com/angular/angular/issues/21872)
+* **bazel:** improve error message for missing assets ([#22096](https://github.com/angular/angular/issues/22096)) ([dcf64a0](https://github.com/angular/angular/commit/dcf64a0)), closes [#22095](https://github.com/angular/angular/issues/22095)
+* **common:** add locale currency values ([#21783](https://github.com/angular/angular/issues/21783)) ([420cc7a](https://github.com/angular/angular/commit/420cc7a)), closes [#20385](https://github.com/angular/angular/issues/20385)
+* **common:** round currencies based on decimal digits in `CurrencyPipe` ([#21783](https://github.com/angular/angular/issues/21783)) ([44154e7](https://github.com/angular/angular/commit/44154e7)), closes [#10189](https://github.com/angular/angular/issues/10189)
+* **common:** weaken AsyncPipe transform signature ([#22169](https://github.com/angular/angular/issues/22169)) ([be59c3a](https://github.com/angular/angular/commit/be59c3a))
+* **compiler:** make unary plus operator consistent to JavaScript ([#22154](https://github.com/angular/angular/issues/22154)) ([72f8abd](https://github.com/angular/angular/commit/72f8abd)), closes [#22089](https://github.com/angular/angular/issues/22089)
+* **core:** add stacktrace in log when error during cleanup component in TestBed ([#22162](https://github.com/angular/angular/issues/22162)) ([16d1700](https://github.com/angular/angular/commit/16d1700))
+* **core:** ensure initial value of QueryList length ([#21980](https://github.com/angular/angular/issues/21980)) ([#21982](https://github.com/angular/angular/issues/21982)) ([e56de10](https://github.com/angular/angular/commit/e56de10)), closes [#21980](https://github.com/angular/angular/issues/21980)
+* **core:** use appropriate inert document strategy for Firefox & Safari ([#17019](https://github.com/angular/angular/issues/17019)) ([a751649](https://github.com/angular/angular/commit/a751649))
+* **forms:** make Validators.email support optional controls ([#20869](https://github.com/angular/angular/issues/20869)) ([140e7c0](https://github.com/angular/angular/commit/140e7c0))
+* **forms:** prevent event emission on enable/disable when emitEvent is false ([#12366](https://github.com/angular/angular/issues/12366)) ([#21018](https://github.com/angular/angular/issues/21018)) ([0bcfae7](https://github.com/angular/angular/commit/0bcfae7))
+* **forms:** set state before emitting a value from ngModelChange ([#21514](https://github.com/angular/angular/issues/21514)) ([9744a1c](https://github.com/angular/angular/commit/9744a1c)), closes [#21513](https://github.com/angular/angular/issues/21513)
+* **language-service:** correct instructions to install the language service ([#22000](https://github.com/angular/angular/issues/22000)) ([b37cee3](https://github.com/angular/angular/commit/b37cee3))
+* **platform-browser:** add @Injectable where it was missing ([#22005](https://github.com/angular/angular/issues/22005)) ([0a1a397](https://github.com/angular/angular/commit/0a1a397))
+* **platform-browser:** support 0/false/null values in transfer_state ([#22179](https://github.com/angular/angular/issues/22179)) ([6435ecd](https://github.com/angular/angular/commit/6435ecd))


+### Features

-<a name="5.2.6"></a>
-## [5.2.6](https://github.com/angular/angular/compare/5.2.5...5.2.6) (2018-02-22)
+* **bazel:** allow explicit specification of factories ([#22003](https://github.com/angular/angular/issues/22003)) ([e442881](https://github.com/angular/angular/commit/e442881))
+* **compiler:** mark @NgModules in provider lists for identification at runtime ([#22005](https://github.com/angular/angular/issues/22005)) ([2d5e7d1](https://github.com/angular/angular/commit/2d5e7d1))
+* **forms:** multiple validators for array method ([#20766](https://github.com/angular/angular/issues/20766)) ([941e88f](https://github.com/angular/angular/commit/941e88f)), closes [#20665](https://github.com/angular/angular/issues/20665)
+* change @Injectable() to support tree-shakeable tokens ([#22005](https://github.com/angular/angular/issues/22005)) ([235a235](https://github.com/angular/angular/commit/235a235))

-### 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)
@@ -42,6 +50,36 @@



+<a name="6.0.0-beta.3"></a>
+# [6.0.0-beta.3](https://github.com/angular/angular/compare/6.0.0-beta.2...6.0.0-beta.3) (2018-02-07)
+
+
+### Bug Fixes
+
+* **common:** don't convert null to a string when flushing a mock request ([#21417](https://github.com/angular/angular/issues/21417)) ([8b14488](https://github.com/angular/angular/commit/8b14488)), closes [#20744](https://github.com/angular/angular/issues/20744)
+* **core:** fix [#20582](https://github.com/angular/angular/issues/20582), don't need to wrap zone in location change listener ([#20640](https://github.com/angular/angular/issues/20640)) ([f791e9f](https://github.com/angular/angular/commit/f791e9f))
+* **core:** fix proper propagation of subscriptions in EventEmitter ([#22016](https://github.com/angular/angular/issues/22016)) ([e81606c](https://github.com/angular/angular/commit/e81606c)), closes [#21999](https://github.com/angular/angular/issues/21999)
+* **core:** should check Zone existance when scheduleMicroTask ([#20656](https://github.com/angular/angular/issues/20656)) ([3a86940](https://github.com/angular/angular/commit/3a86940))
+* **forms:** publish missing types ([#19941](https://github.com/angular/angular/issues/19941)) ([2707012](https://github.com/angular/angular/commit/2707012))
+* **ivy:** generate correct interpolations ([#21946](https://github.com/angular/angular/issues/21946)) ([3cc1d76](https://github.com/angular/angular/commit/3cc1d76))
+* **ivy:** generate lifecycle pattern ([#21865](https://github.com/angular/angular/issues/21865)) ([f816666](https://github.com/angular/angular/commit/f816666))
+* **ivy:** improve `bindV` perf and memory usage ([#21881](https://github.com/angular/angular/issues/21881)) ([0846784](https://github.com/angular/angular/commit/0846784))
+* **ivy:** remove unnecessary parameter of NgOnChangesFeature ([#21879](https://github.com/angular/angular/issues/21879)) ([65cf1ad](https://github.com/angular/angular/commit/65cf1ad))
+
+
+### Features
+
+* **compiler-cli:** reflect static methods added to classes in metadata ([#21926](https://github.com/angular/angular/issues/21926)) ([eb8ddd2](https://github.com/angular/angular/commit/eb8ddd2))
+* **ivy:** add canonical example of a pipe. ([#21834](https://github.com/angular/angular/issues/21834)) ([743d8bc](https://github.com/angular/angular/commit/743d8bc))
+* **ivy:** add support for attributes on ng-content nodes ([#21935](https://github.com/angular/angular/issues/21935)) ([1aa2947](https://github.com/angular/angular/commit/1aa2947))
+* **ivy:** memoize array literals in render3 ([#21973](https://github.com/angular/angular/issues/21973)) ([4d62be6](https://github.com/angular/angular/commit/4d62be6))
+
+
+### Performance Improvements
+
+* **ivy:** improve Uglify configuration in hello world integration test ([#21985](https://github.com/angular/angular/issues/21985)) ([7e51e52](https://github.com/angular/angular/commit/7e51e52))
+
+

 <a name="5.2.4"></a>
 ## [5.2.4](https://github.com/angular/angular/compare/5.2.3...5.2.4) (2018-02-07)
@@ -56,6 +94,17 @@



+<a name="6.0.0-beta.2"></a>
+# [6.0.0-beta.2](https://github.com/angular/angular/compare/6.0.0-beta.1...6.0.0-beta.2) (2018-01-31)
+
+
+### Features
+
+* **router:** add navigationSource and restoredState to NavigationStart event ([#21728](https://github.com/angular/angular/issues/21728)) ([c40ae7f](https://github.com/angular/angular/commit/c40ae7f))
+* **service-worker:** add helper script which will uninstall SW ([#21863](https://github.com/angular/angular/issues/21863)) ([b10540a](https://github.com/angular/angular/commit/b10540a))
+
+
+
 <a name="5.2.3"></a>
 ## [5.2.3](https://github.com/angular/angular/compare/5.2.2...5.2.3) (2018-01-31)

@@ -73,6 +122,32 @@



+<a name="6.0.0-beta.1"></a>
+# [6.0.0-beta.1](https://github.com/angular/angular/compare/6.0.0-beta.0...6.0.0-beta.1) (2018-01-25)
+
+
+### Bug Fixes
+
+* **common:** A null value should remove the style on IE ([#21679](https://github.com/angular/angular/issues/21679)) ([7d49443](https://github.com/angular/angular/commit/7d49443)), closes [#21064](https://github.com/angular/angular/issues/21064)
+* avoid triggering a cli bug ([#21611](https://github.com/angular/angular/issues/21611)) ([0eabd07](https://github.com/angular/angular/commit/0eabd07))
+* **common:** don't remove special characters when extracting CLDR data ([#21626](https://github.com/angular/angular/issues/21626)) ([135a282](https://github.com/angular/angular/commit/135a282))
+* **common:** extract plural function from i18n locale data files for TS 2.6 ([#21626](https://github.com/angular/angular/issues/21626)) ([97b18b2](https://github.com/angular/angular/commit/97b18b2)), closes [#21608](https://github.com/angular/angular/issues/21608)
+* **common:** fallback to last defined value for named date and time formats ([#21299](https://github.com/angular/angular/issues/21299)) ([879756d](https://github.com/angular/angular/commit/879756d)), closes [#21282](https://github.com/angular/angular/issues/21282)
+* **compiler:** add support for marker tags in xliff serializers ([#21250](https://github.com/angular/angular/issues/21250)) ([f74130c](https://github.com/angular/angular/commit/f74130c)), closes [#21078](https://github.com/angular/angular/issues/21078)
+* **compiler:** Don't strip `/*# sourceURL ... */` ([#16088](https://github.com/angular/angular/issues/16088)) ([5f681f9](https://github.com/angular/angular/commit/5f681f9))
+* **compiler:** fix ICU select messages to use male/female/other ([#21713](https://github.com/angular/angular/issues/21713)) ([cb5090c](https://github.com/angular/angular/commit/cb5090c))
+* **compiler-cli:** do not fold errors past calls in the collector ([#21708](https://github.com/angular/angular/issues/21708)) ([dd86790](https://github.com/angular/angular/commit/dd86790))
+* **compiler-cli:** do not lower expressions in non-modules ([#21649](https://github.com/angular/angular/issues/21649)) ([7f93aad](https://github.com/angular/angular/commit/7f93aad))
+* **router:** don't use ParamsInheritanceStrategy in declarations ([#21574](https://github.com/angular/angular/issues/21574)) ([925e654](https://github.com/angular/angular/commit/925e654)), closes [#21456](https://github.com/angular/angular/issues/21456)
+
+
+### Features
+
+* **compiler:** implement "enableIvy" compiler option ([#21427](https://github.com/angular/angular/issues/21427)) ([64d16de](https://github.com/angular/angular/commit/64d16de))
+* **core:** optional generic type for ElementRef ([#20765](https://github.com/angular/angular/issues/20765)) ([d3d9aac](https://github.com/angular/angular/commit/d3d9aac)), closes [#13139](https://github.com/angular/angular/issues/13139)
+
+
+
 <a name="5.2.2"></a>
 ## [5.2.2](https://github.com/angular/angular/compare/5.2.1...5.2.2) (2018-01-25)

@@ -92,6 +167,36 @@



+<a name="6.0.0-beta.0"></a>
+# [6.0.0-beta.0](https://github.com/angular/angular/compare/5.2.0...6.0.0-beta.0) (2018-01-17)
+
+
+### Bug Fixes
+
+* **animations:** fix increment/decrement aliases example ([#18323](https://github.com/angular/angular/issues/18323)) ([d2aa8ac](https://github.com/angular/angular/commit/d2aa8ac))
+* **benchpress:** should still support selenium_webdriver < 3.6.0 ([#21477](https://github.com/angular/angular/issues/21477)) ([9b84a32](https://github.com/angular/angular/commit/9b84a32))
+* **common:** set correct timezone for ISO8601 dates in Safari ([#21506](https://github.com/angular/angular/issues/21506)) ([05208b8](https://github.com/angular/angular/commit/05208b8)), closes [#21491](https://github.com/angular/angular/issues/21491)
+* **compiler:** cache external reference resolution ([#21359](https://github.com/angular/angular/issues/21359)) ([e3e2fc0](https://github.com/angular/angular/commit/e3e2fc0))
+* **compiler:** make `.ngsummary.json` files idempotent ([#21448](https://github.com/angular/angular/issues/21448)) ([e64b1e9](https://github.com/angular/angular/commit/e64b1e9))
+* **core:** fix chained http call ([#20924](https://github.com/angular/angular/issues/20924)) ([7e3f9a4](https://github.com/angular/angular/commit/7e3f9a4)), closes [#20921](https://github.com/angular/angular/issues/20921)
+* **ivy:** Add workaround for AJD in google3 ([#21488](https://github.com/angular/angular/issues/21488)) ([6af3672](https://github.com/angular/angular/commit/6af3672))
+* **language-service:** Clear caches when program changes ([#21337](https://github.com/angular/angular/issues/21337)) ([43e1520](https://github.com/angular/angular/commit/43e1520)), closes [#19405](https://github.com/angular/angular/issues/19405)
+* **service-worker:** properly handle invalid hashes in all scenarios ([#21288](https://github.com/angular/angular/issues/21288)) ([3951098](https://github.com/angular/angular/commit/3951098))
+
+
+### Features
+
+* **bazel:** allow ng_module rules to control whether type checking is enabled ([#21460](https://github.com/angular/angular/issues/21460)) ([cffa0fe](https://github.com/angular/angular/commit/cffa0fe))
+* **core:** add binding name to content changed error ([#20352](https://github.com/angular/angular/issues/20352)) ([d3bf54b](https://github.com/angular/angular/commit/d3bf54b))
+* **forms:** handle string with and without line boundary on pattern validator ([#19256](https://github.com/angular/angular/issues/19256)) ([54bf179](https://github.com/angular/angular/commit/54bf179))
+
+
+### Performance Improvements
+
+* **ivy:** add missing dom element in render3_function tree benchmark ([#21476](https://github.com/angular/angular/issues/21476)) ([9b5a485](https://github.com/angular/angular/commit/9b5a485))
+
+
+
 <a name="5.2.1"></a>
 ## [5.2.1](https://github.com/angular/angular/compare/5.2.0...5.2.1) (2018-01-17)

@@ -1,12 +0,0 @@
-# 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).
@@ -16,13 +16,13 @@ load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_reposi
 check_bazel_version("0.9.0")
 node_repositories(package_json = ["//:package.json"])

-RULES_TYPESCRIPT_VERSION = "d3cc5cd72d89aee0e4c2553ae1b99c707ecbef4e"
+RULES_TYPESCRIPT_VERSION = "0.10.1"

 http_archive(
    name = "build_bazel_rules_typescript",
    url = "https://github.com/bazelbuild/rules_typescript/archive/%s.zip" % RULES_TYPESCRIPT_VERSION,
    strip_prefix = "rules_typescript-%s" % RULES_TYPESCRIPT_VERSION,
-    sha256 = "a233fcca41c3e59f639ac71c396edb30e9e9716cf8ed5fb20b51ff8910d5d895",
+    sha256 = "a2c81776a4a492ff9f878f9705639f5647bef345f7f3e1da09c9eeb8dec80485",
 )

 load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
@@ -34,16 +34,13 @@ local_repository(
    path = "node_modules/rxjs/src",
 )

-# 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(
+git_repository(
    name = "com_github_bazelbuild_buildtools",
-    url = "https://github.com/bazelbuild/buildtools/archive/%s.zip" % BAZEL_BUILDTOOLS_VERSION,
-    strip_prefix = "buildtools-%s" % BAZEL_BUILDTOOLS_VERSION,
-    sha256 = "dad19224258ed67cbdbae9b7befb785c3b966e5a33b04b3ce58ddb7824b97d73",
+    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",
 )

 http_archive(
@@ -65,3 +62,23 @@ http_archive(
    strip_prefix = "bazel-9755c72b48866ed034bd28aa033e9abd27431b1e",
    sha256 = "5b8443fc3481b5fcd9e7f348e1dd93c1397f78b223623c39eb56494c55f41962",
 )
+
+# We have a source dependency on the Devkit repository, because it's built with
+# Bazel.
+# This allows us to edit sources and have the effect appear immediately without
+# re-packaging or "npm link"ing.
+# Even better, things like aspects will visit the entire graph including
+# ts_library rules in the devkit repository.
+http_archive(
+    name = "angular_devkit",
+    url = "https://github.com/angular/devkit/archive/v0.3.1.zip",
+    strip_prefix = "devkit-0.3.1",
+    sha256 = "31d4b597fe9336650acf13df053c1c84dcbe9c29c6a833bcac3819cd3fd8cad3",
+)
+
+http_archive(
+    name = "org_brotli",
+    url = "https://github.com/google/brotli/archive/v1.0.2.zip",
+    strip_prefix = "brotli-1.0.2",
+    sha256 = "b43d5d6bc40f2fa6c785b738d86c6bbe022732fe25196ebbe43b9653a025920d",
+)
@@ -39,7 +39,7 @@
  ],
  "e2e": {
    "protractor": {
-      "config": "./protractor.conf.js"
+      "config": "tests/e2e/protractor.conf.js"
    }
  },
  "lint": [
@@ -50,12 +50,12 @@
      "project": "src/tsconfig.spec.json"
    },
    {
-      "project": "e2e/tsconfig.e2e.json"
+      "project": "tests/e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
-      "config": "./karma.conf.js"
+      "config": "src/karma.conf.js"
    }
  },
  "defaults": {
@@ -1,131 +0,0 @@
-
-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 {
-}
@@ -1,66 +0,0 @@
-
-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
@@ -1,32 +0,0 @@
-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
@@ -1,5 +0,0 @@
-
-import './geolocation';
-import './subscribing';
-import './creating';
-import './multicasting';
@@ -1,155 +0,0 @@
-
-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
@@ -1,33 +0,0 @@
-
-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
@@ -1,26 +0,0 @@
-
-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) {
-  // ...
-}
@@ -1,18 +0,0 @@
-
-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
-});
@@ -1,26 +0,0 @@
-
-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
@@ -1,20 +0,0 @@
-
-
-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
-    );
-  }
-}
@@ -1,25 +0,0 @@
-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
-
-
@@ -1,18 +0,0 @@
-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),
-    map(n => n * n)
-  );
-
-// Subscribe to get values
-squareOdd.subscribe(x => console.log(x));
-
-// #enddocregion
@@ -1,21 +0,0 @@
-
-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
@@ -1,27 +0,0 @@
-
-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
@@ -1,65 +0,0 @@
-
-// #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
-
-
@@ -1,5 +1,5 @@
 {
-  "description": "Testing - specs",
+  "description": "Testing - app.specs",
  "files":[
    "src/styles.css",

@@ -0,0 +1,5 @@
+// #docplaster
+// #docregion
+describe('1st tests', () => {
+  it('true is true', () => expect(true).toBe(true));
+});
@@ -1,8 +1,9 @@
 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>;

@@ -18,8 +19,8 @@ describe('AboutComponent (highlightDirective)', () => {
  });

  it('should have skyblue <h2>', () => {
-    const h2: HTMLElement = fixture.nativeElement.querySelector('h2');
-    const bgColor = h2.style.backgroundColor;
+    const de = fixture.debugElement.query(By.css('h2'));
+    const bgColor = de.nativeElement.style.backgroundColor;
    expect(bgColor).toBe('skyblue');
  });
  // #enddocregion tests
@@ -3,8 +3,7 @@ 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 { }
@@ -1,76 +0,0 @@
-// #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!');
-  });
-});
@@ -1,7 +1,7 @@
 import { NgModule }       from '@angular/core';
 import { RouterModule }   from '@angular/router';

-import { AboutComponent } from './about/about.component';
+import { AboutComponent } from './about.component';

@NgModule({
  imports: [
@@ -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>
@@ -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,15 +17,11 @@ import { By }                 from '@angular/platform-browser';
 import { DebugElement, Type } from '@angular/core';
 import { Location }           from '@angular/common';

-import { click }              from '../testing';
-
 import { AppModule }          from './app.module';
 import { AppComponent }       from './app.component';
-import { AboutComponent }     from './about/about.component';
+import { AboutComponent }     from './about.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { TwainService }       from './twain/twain.service';
-
-import { HeroService, TestHeroService } from './model/testing/test-hero.service';
+import { TwainService }       from './shared/twain.service';

 let comp:     AppComponent;
 let fixture:  ComponentFixture<AppComponent>;
@@ -35,19 +31,15 @@ let location: SpyLocation;

 describe('AppComponent & RouterTestingModule', () => {

-  beforeEach(async(() => {
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
-      imports: [ AppModule, RouterTestingModule ],
-      providers: [
-        { provide: HeroService, useClass: TestHeroService }
-      ]
+      imports: [ AppModule, RouterTestingModule ]
    })
    .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);
  }));
@@ -72,7 +64,7 @@ describe('AppComponent & RouterTestingModule', () => {
  }));

  // Can't navigate to lazy loaded modules with this technique
-  xit('should navigate to "Heroes" on click (not working yet)', fakeAsync(() => {
+  xit('should navigate to "Heroes" on click', fakeAsync(() => {
    createComponent();
    page.heroesLinkDe.nativeElement.click();
    advance();
@@ -92,9 +84,9 @@ import { HeroListComponent }      from './hero/hero-list.component';
 let loader: SpyNgModuleFactoryLoader;

 ///////// Can't get lazy loaded Heroes to work yet
-xdescribe('AppComponent & Lazy Loading (not working yet)', () => {
+xdescribe('AppComponent & Lazy Loading', () => {

-  beforeEach(async(() => {
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
      imports: [ AppModule, RouterTestingModule ]
    })
@@ -103,11 +95,14 @@ xdescribe('AppComponent & Lazy Loading (not working yet)', () => {

  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();
@@ -115,24 +110,25 @@ xdescribe('AppComponent & Lazy Loading (not working yet)', () => {
    expectElementOf(HeroListComponent);
  }));

-  it('can navigate to "Heroes" w/ browser location URL change', fakeAsync(() => {
+  xit('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 /////////

-/**
- * Advance to the routed page
- * Wait a tick, then detect changes, and tick again
- */
+/** Wait a tick, then detect changes */
 function advance(): void {
-  tick(); // wait while navigating
-  fixture.detectChanges(); // update view
-  tick(); // wait for async data to arrive
+  tick();
+  fixture.detectChanges();
 }

 function createComponent() {
@@ -144,8 +140,8 @@ function createComponent() {
  router = injector.get(Router);
  router.initialNavigation();
  spyOn(injector.get(TwainService), 'getQuote')
-    // fake fast async observable
-    .and.returnValue(asyncData('Test Quote'));
+    .and.returnValue(Promise.resolve('Test Quote')); // fakes it
+
  advance();

  page = new Page();
@@ -155,6 +151,7 @@ class Page {
  aboutLinkDe:     DebugElement;
  dashboardLinkDe: DebugElement;
  heroesLinkDe:    DebugElement;
+  recordedEvents:  any[]  =  [];

  // for debugging
  comp: AppComponent;
@@ -162,7 +159,17 @@ 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];
@@ -1,67 +1,69 @@
 // #docplaster
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed
+} from '@angular/core/testing';

-import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';

-import { AppComponent } from './app.component';
-import { RouterLinkDirectiveStub } from '../testing';
+  // #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';

-// #docregion component-stubs
-@Component({selector: 'app-banner', template: ''})
-class BannerStubComponent {}
+  // #enddocregion setup-schemas
+  @Component({selector: 'app-welcome', template: ''})
+  class WelcomeStubComponent {}

-@Component({selector: 'router-outlet', template: ''})
-class RouterOutletStubComponent { }
-
-@Component({selector: 'app-welcome', template: ''})
-class WelcomeStubComponent {}
-// #enddocregion component-stubs
+  // #enddocregion setup-stubs-w-imports

 let comp:    AppComponent;
 let fixture: ComponentFixture<AppComponent>;

 describe('AppComponent & TestModule', () => {
-  beforeEach(async(() => {
-    // #docregion testbed-stubs
+  // #docregion setup-stubs, setup-stubs-w-imports
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
-        RouterLinkDirectiveStub,
-        BannerStubComponent,
-        RouterOutletStubComponent,
-        WelcomeStubComponent
+        BannerComponent, WelcomeStubComponent,
+        RouterLinkStubDirective, RouterOutletStubComponent
      ]
    })
-    // #enddocregion testbed-stubs
-    .compileComponents().then(() => {
+
+    .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', () => {
-  beforeEach(async(() => {
-    // #docregion no-errors-schema, mixed-setup
+  // #docregion setup-schemas
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent,
-        // #enddocregion no-errors-schema
-        BannerStubComponent,
-        // #docregion no-errors-schema
-        RouterLinkDirectiveStub
-      ],
-      schemas: [ NO_ERRORS_SCHEMA ]
+      declarations: [ AppComponent, RouterLinkStubDirective ],
+      schemas:      [ NO_ERRORS_SCHEMA ]
    })
-    // #enddocregion no-errors-schema, mixed-setup
-    .compileComponents().then(() => {
+
+    .compileComponents()
+    .then(() => {
      fixture = TestBed.createComponent(AppComponent);
      comp    = fixture.componentInstance;
    });
  }));
+  // #enddocregion setup-schemas
  tests();
 });

@@ -73,7 +75,7 @@ import { AppRoutingModule } from './app-routing.module';

 describe('AppComponent & AppModule', () => {

-  beforeEach(async(() => {
+  beforeEach( async(() => {

    TestBed.configureTestingModule({
      imports: [ AppModule ]
@@ -86,7 +88,7 @@ describe('AppComponent & AppModule', () => {
        imports: [ AppRoutingModule ]
      },
      add: {
-        declarations: [ RouterLinkDirectiveStub, RouterOutletStubComponent ]
+        declarations: [ RouterLinkStubDirective, RouterOutletStubComponent ]
      }
    })

@@ -102,40 +104,40 @@ describe('AppComponent & AppModule', () => {
 });

 function tests() {
-  let routerLinks: RouterLinkDirectiveStub[];
+  let links: RouterLinkStubDirective[];
  let linkDes: DebugElement[];

  // #docregion test-setup
  beforeEach(() => {
-    fixture.detectChanges(); // trigger initial data binding
+    // trigger initial data binding
+    fixture.detectChanges();

    // find DebugElements with an attached RouterLinkStubDirective
    linkDes = fixture.debugElement
-      .queryAll(By.directive(RouterLinkDirectiveStub));
+      .queryAll(By.directive(RouterLinkStubDirective));

-    // get attached link directive instances
-    // using each DebugElement's injector
-    routerLinks = linkDes.map(de => de.injector.get(RouterLinkDirectiveStub));
+    // get the attached link directive instances using the DebugElement injectors
+    links = linkDes
+      .map(de => de.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);
  });
  // #enddocregion test-setup

-  it('can instantiate the component', () => {
+  it('can instantiate it', () => {
    expect(comp).not.toBeNull();
  });

  // #docregion tests
  it('can get RouterLinks from template', () => {
-    expect(routerLinks.length).toBe(3, 'should have 3 routerLinks');
-    expect(routerLinks[0].linkParams).toBe('/dashboard');
-    expect(routerLinks[1].linkParams).toBe('/heroes');
-    expect(routerLinks[2].linkParams).toBe('/about');
+    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');
  });

  it('can click Heroes link in template', () => {
-    const heroesLinkDe = linkDes[1];   // heroes link DebugElement
-    const heroesLink = routerLinks[1]; // heroes link directive
+    const heroesLinkDe = linkDes[1];
+    const heroesLink = links[1];

-    expect(heroesLink.navigatedTo).toBeNull('should not have navigated yet');
+    expect(heroesLink.navigatedTo).toBeNull('link should not have navigated yet');

    heroesLinkDe.triggerEventHandler('click', null);
    fixture.detectChanges();
@@ -1,50 +1,29 @@
 import { NgModule }         from '@angular/core';
 import { BrowserModule }    from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';

 import { AppComponent }     from './app.component';
 import { AppRoutingModule } from './app-routing.module';

-import { AboutComponent }   from './about/about.component';
-import { BannerComponent }  from './banner/banner.component';
-import { HeroService }      from './model/hero.service';
+import { AboutComponent }   from './about.component';
+import { BannerComponent }  from './banner.component';
 import { UserService }      from './model/user.service';
-import { TwainComponent }   from './twain/twain.component';
-import { TwainService }     from './twain/twain.service';
-import { WelcomeComponent } from './welcome/welcome.component';
+import { HeroService } from './model/hero.service';
+import { TwainService }     from './shared/twain.service';
+import { WelcomeComponent } from './welcome.component';
+

 import { DashboardModule }  from './dashboard/dashboard.module';
 import { SharedModule }     from './shared/shared.module';

-import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { InMemoryDataService } from './in-memory-data.service';
-
@NgModule({
  imports: [
    BrowserModule,
    DashboardModule,
    AppRoutingModule,
-    SharedModule,
-    HttpClientModule,
-
-    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
-    // and returns simulated server responses.
-    // Remove it when a real server is ready to receive requests.
-    HttpClientInMemoryWebApiModule.forRoot(
-      InMemoryDataService, { dataEncapsulation: false }
-    )
+    SharedModule
  ],
-  providers: [
-    HeroService,
-    TwainService,
-    UserService
-  ],
-  declarations: [
-    AppComponent,
-    AboutComponent,
-    BannerComponent,
-    TwainComponent,
-    WelcomeComponent ],
-  bootstrap: [ AppComponent ]
+  providers:    [ HeroService, TwainService, UserService ],
+  declarations: [ AppComponent, AboutComponent, BannerComponent, WelcomeComponent ],
+  bootstrap:    [ AppComponent ]
 })
 export class AppModule { }
@@ -1,8 +1,7 @@
 // tslint:disable-next-line:no-unused-variable
 import { async, fakeAsync, tick } from '@angular/core/testing';

-import { of } from 'rxjs/observable/of';
-import { delay } from 'rxjs/operators';
+import { Observable } from 'rxjs/Observable';

 describe('Angular async helper', () => {
  let actuallyDone = false;
@@ -35,8 +34,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: DoneFn) => {
-    const source = of(true).pipe(delay(10));
+  it('should run async test with successful delayed Observable', (done: any) => {
+    const source = Observable.of(true).delay(10);
    source.subscribe(
      val => actuallyDone = true,
      err => fail(err),
@@ -47,7 +46,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 = of(true).pipe(delay(10));
+  //   const source = Observable.of(true).delay(10);
  //   source.subscribe(
  //     val => actuallyDone = true,
  //     err => fail(err)
@@ -57,7 +56,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 = of(true).pipe(delay(10));
+  //   const source = Observable.of(true).delay(10);
  //   source.subscribe(
  //     val => actuallyDone = true,
  //     err => fail(err)
@@ -1,5 +1,5 @@
 // main app entry point
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DemoModule } from './demo';
+import { BagModule } from './bag';

-platformBrowserDynamic().bootstrapModule(DemoModule);
+platformBrowserDynamic().bootstrapModule(BagModule);
@@ -0,0 +1,130 @@
+// #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
@@ -0,0 +1,681 @@
+// #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';
+}
@@ -6,8 +6,9 @@ import { Component, ContentChildren, Directive, EventEmitter,
         Pipe, PipeTransform,
         SimpleChange } from '@angular/core';

-import { of } from 'rxjs/observable/of';
-import { delay } from 'rxjs/operators';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/delay';

 ////////// The App: Services and Components for the tests. //////////////

@@ -16,31 +17,37 @@ export class Hero {
 }

 ////////// Services ///////////////
-// #docregion ValueService
+// #docregion FancyService
@Injectable()
-export class ValueService {
+export class FancyService {
  protected value = 'real value';

  getValue() { return this.value; }
  setValue(value: string) { this.value = value; }

-  getObservableValue() { return of('observable value'); }
+  getAsyncValue() { return Promise.resolve('async value'); }

-  getPromiseValue() { return Promise.resolve('promise value'); }
+  getObservableValue() { return Observable.of('observable value'); }
+
+  getTimeoutValue() {
+    return new Promise((resolve) => {
+      setTimeout(() => { resolve('timeout value'); }, 10);
+    });
+  }

  getObservableDelayValue() {
-    return of('observable delay value').pipe(delay(10));
+    return Observable.of('observable delay value').delay(10);
  }
 }
-// #enddocregion ValueService
+// #enddocregion FancyService

-// #docregion MasterService
+// #docregion DependentService
@Injectable()
-export class MasterService {
-  constructor(private masterService: ValueService) { }
-  getValue() { return this.masterService.getValue(); }
+export class DependentService {
+  constructor(private dependentService: FancyService) { }
+  getValue() { return this.dependentService.getValue(); }
 }
-// #enddocregion MasterService
+// #enddocregion DependentService

 /////////// Pipe ////////////////
 /*
@@ -95,19 +102,19 @@ export class BankAccountParentComponent {
  isClosed = true;
 }

-// #docregion LightswitchComp
+// #docregion ButtonComp
@Component({
-  selector: 'lightswitch-comp',
+  selector: 'button-comp',
  template: `
    <button (click)="clicked()">Click me!</button>
    <span>{{message}}</span>`
 })
-export class LightswitchComponent {
+export class ButtonComponent {
  isOn = false;
  clicked() { this.isOn = !this.isOn; }
  get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
 }
-// #enddocregion LightswitchComp
+// #enddocregion ButtonComp

@Component({
  selector: 'child-1',
@@ -224,31 +231,31 @@ export class MyIfComponent {

@Component({
  selector: 'my-service-comp',
-  template: `injected value: {{valueService.value}}`,
-  providers: [ValueService]
+  template: `injected value: {{fancyService.value}}`,
+  providers: [FancyService]
 })
 export class TestProvidersComponent {
-  constructor(public valueService: ValueService) {}
+  constructor(public fancyService: FancyService) {}
 }


@Component({
  selector: 'my-service-comp',
-  template: `injected value: {{valueService.value}}`,
-  viewProviders: [ValueService]
+  template: `injected value: {{fancyService.value}}`,
+  viewProviders: [FancyService]
 })
 export class TestViewProvidersComponent {
-  constructor(public valueService: ValueService) {}
+  constructor(public fancyService: FancyService) {}
 }

@Component({
  selector: 'external-template-comp',
-  templateUrl: './demo-external-template.html'
+  templateUrl: './bag-external-template.html'
 })
 export class ExternalTemplateComponent implements OnInit {
  serviceValue: string;

-  constructor(@Optional() private service: ValueService) {  }
+  constructor(@Optional() private service: FancyService) {  }

  ngOnInit() {
    if (this.service) { this.serviceValue = this.service.getValue(); }
@@ -369,9 +376,9 @@ export class ReversePipeComponent {
 export class ShellComponent { }

@Component({
-  selector: 'demo-comp',
+  selector: 'bag-comp',
  template: `
-    <h1>Specs Demo</h1>
+    <h1>Specs Bag</h1>
    <my-if-parent-comp></my-if-parent-comp>
    <hr>
    <h3>Input/Output Component</h3>
@@ -390,7 +397,7 @@ export class ShellComponent { }
    <input-value-comp></input-value-comp>
    <hr>
    <h3>Button Component</h3>
-    <lightswitch-comp></lightswitch-comp>
+    <button-comp></button-comp>
    <hr>
    <h3>Needs Content</h3>
    <needs-content #nc>
@@ -402,13 +409,13 @@ export class ShellComponent { }
    </needs-content>
  `
 })
-export class DemoComponent { }
+export class BagComponent { }
 //////// Aggregations ////////////

-export const demoDeclarations = [
-  DemoComponent,
+export const bagDeclarations = [
+  BagComponent,
  BankAccountComponent, BankAccountParentComponent,
-  LightswitchComponent,
+  ButtonComponent,
  Child1Component, Child2Component, Child3Component,
  ExternalTemplateComponent, InnerCompWithExternalTemplateComponent,
  InputComponent,
@@ -420,7 +427,7 @@ export const demoDeclarations = [
  ReversePipe, ReversePipeComponent, ShellComponent
 ];

-export const demoProviders = [MasterService, ValueService];
+export const bagProviders = [DependentService, FancyService];

 ////////////////////
 ////////////
@@ -430,10 +437,10 @@ import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [BrowserModule, FormsModule],
-  declarations: demoDeclarations,
-  providers:    demoProviders,
-  entryComponents: [DemoComponent],
-  bootstrap:       [DemoComponent]
+  declarations: bagDeclarations,
+  providers:    bagProviders,
+  entryComponents: [BagComponent],
+  bootstrap:       [BagComponent]
 })
-export class DemoModule { }
+export class BagModule { }

@@ -0,0 +1,55 @@
+// #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
@@ -1,14 +1,11 @@
-// #docplaster
 // #docregion
 import { Component } from '@angular/core';

-// #docregion metadata
@Component({
  selector: 'app-banner',
-  templateUrl: './banner-external.component.html',
-  styleUrls:  ['./banner-external.component.css']
+  template: '<h1>{{title}}</h1>'
 })
-// #enddocregion metadata
 export class BannerComponent {
  title = 'Test Tour of Heroes';
 }
+
@@ -7,45 +7,53 @@ 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 h1:      HTMLElement;
+  let de:      DebugElement;
+  let el:      HTMLElement;

-  beforeEach(() => {
+  beforeEach(async(() => {
    // #docregion auto-detect
    TestBed.configureTestingModule({
      declarations: [ BannerComponent ],
      providers: [
        { provide: ComponentFixtureAutoDetect, useValue: true }
      ]
-    });
+    })
    // #enddocregion auto-detect
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
    fixture = TestBed.createComponent(BannerComponent);
    comp = fixture.componentInstance;
-    h1 = fixture.nativeElement.querySelector('h1');
+    de = fixture.debugElement.query(By.css('h1'));
+    el = de.nativeElement;
  });

  // #docregion auto-detect-tests
  it('should display original title', () => {
    // Hooray! No `fixture.detectChanges()` needed
-    expect(h1.textContent).toContain(comp.title);
+    expect(el.textContent).toContain(comp.title);
  });

  it('should still see original title after comp.title change', () => {
    const oldTitle = comp.title;
    comp.title = 'Test Title';
    // Displayed title is old because Angular didn't hear the change :(
-    expect(h1.textContent).toContain(oldTitle);
+    expect(el.textContent).toContain(oldTitle);
  });

  it('should display updated title after detectChanges', () => {
    comp.title = 'Test Title';
    fixture.detectChanges(); // detect changes explicitly
-    expect(h1.textContent).toContain(comp.title);
+    expect(el.textContent).toContain(comp.title);
  });
  // #enddocregion auto-detect-tests
 });
@@ -0,0 +1,53 @@
+// #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');
+  });
+
+});
@@ -1,12 +1,12 @@
+// #docregion
 import { Component } from '@angular/core';

-// #docregion component
@Component({
  selector: 'app-banner',
-  template: '<h1>{{title}}</h1>',
-  styles: ['h1 { color: green; font-size: 350%}']
+  templateUrl: './banner.component.html',
+  styleUrls:  ['./banner.component.css']
 })
 export class BannerComponent {
  title = 'Test Tour of Heroes';
 }
-// #enddocregion component
+
@@ -1,72 +0,0 @@
-// #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');
-    });
-  }
-});
-
@@ -1,119 +0,0 @@
-// #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
@@ -1,10 +0,0 @@
-// 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 { }
@@ -1,56 +0,0 @@
-// #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
-});
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<div (click)="click()" class="hero">
+  {{hero.name | uppercase}}
+</div>
@@ -1,9 +1,7 @@
-
-// #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';
@@ -13,96 +11,64 @@ import { DashboardHeroComponent } from './dashboard-hero.component';

 beforeEach( addMatchers );

-describe('DashboardHeroComponent class only', () => {
-  // #docregion class-only
-  it('raises the selected event when clicked', () => {
-    const comp = new DashboardHeroComponent();
-    const hero: Hero = { id: 42, name: 'Test' };
-    comp.hero = hero;
-
-    comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
-    comp.click();
-  });
-  // #enddocregion class-only
-});
-
 describe('DashboardHeroComponent when tested directly', () => {

  let comp: DashboardHeroComponent;
  let expectedHero: Hero;
  let fixture: ComponentFixture<DashboardHeroComponent>;
-  let heroDe: DebugElement;
-  let heroEl: HTMLElement;
+  let heroEl: DebugElement;

-  beforeEach(async(() => {
-    // #docregion setup, config-testbed
+  // #docregion setup, compile-components
+  // async beforeEach
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
-      declarations: [ DashboardHeroComponent ]
+      declarations: [ DashboardHeroComponent ],
    })
-    // #enddocregion setup, config-testbed
-    .compileComponents();
+    .compileComponents(); // compile template and css
  }));
+  // #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

-    // 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
+    // pretend that it was wired to something that supplied a hero
+    expectedHero = new Hero(42, 'Test Name');
    comp.hero = expectedHero;
-
-    // trigger initial data binding
-    fixture.detectChanges();
-    // #enddocregion setup
+    fixture.detectChanges(); // trigger initial data binding
  });
+  // #enddocregion setup

  // #docregion name-test
-  it('should display hero name in uppercase', () => {
+  it('should display hero name', () => {
    const expectedPipedName = expectedHero.name.toUpperCase();
-    expect(heroEl.textContent).toContain(expectedPipedName);
+    expect(heroEl.nativeElement.textContent).toContain(expectedPipedName);
  });
  // #enddocregion name-test

  // #docregion click-test
-  it('should raise selected event when clicked (triggerEventHandler)', () => {
+  it('should raise selected event when clicked', () => {
    let selectedHero: Hero;
    comp.selected.subscribe((hero: Hero) => selectedHero = hero);

  // #docregion trigger-event-handler
-    heroDe.triggerEventHandler('click', null);
+    heroEl.triggerEventHandler('click', null);
  // #enddocregion trigger-event-handler
    expect(selectedHero).toBe(expectedHero);
  });
  // #enddocregion click-test

-    // #docregion click-test-2
-    it('should raise selected event when clicked (element.click)', () => {
-      let selectedHero: Hero;
-      comp.selected.subscribe((hero: Hero) => selectedHero = hero);
-
-      heroEl.click();
-      expect(selectedHero).toBe(expectedHero);
-    });
-    // #enddocregion click-test-2
-
-  // #docregion click-test-3
-  it('should raise selected event when clicked (click helper)', () => {
+  // #docregion click-test-2
+  it('should raise selected event when clicked', () => {
    let selectedHero: Hero;
-    comp.selected.subscribe(hero => selectedHero = hero);
-
-    click(heroDe); // click helper with DebugElement
-    click(heroEl); // click helper with native element
+    comp.selected.subscribe((hero: Hero) => selectedHero = hero);

+    click(heroEl);   // triggerEventHandler helper
    expect(selectedHero).toBe(expectedHero);
  });
-  // #enddocregion click-test-3
+  // #enddocregion click-test-2
 });

 //////////////////
@@ -110,31 +76,28 @@ describe('DashboardHeroComponent when tested directly', () => {
 describe('DashboardHeroComponent when inside a test host', () => {
  let testHost: TestHostComponent;
  let fixture: ComponentFixture<TestHostComponent>;
-  let heroEl: HTMLElement;
+  let heroEl: DebugElement;

-  beforeEach(async(() => {
-    // #docregion test-host-setup
+  // #docregion test-host-setup
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
-      declarations: [ DashboardHeroComponent, TestHostComponent ]
-    })
-    // #enddocregion test-host-setup
-    .compileComponents();
+      declarations: [ DashboardHeroComponent, TestHostComponent ], // declare both
+    }).compileComponents();
  }));

  beforeEach(() => {
-    // #docregion test-host-setup
    // create TestHostComponent instead of DashboardHeroComponent
    fixture  = TestBed.createComponent(TestHostComponent);
    testHost = fixture.componentInstance;
-    heroEl   = fixture.nativeElement.querySelector('.hero');
+    heroEl   = fixture.debugElement.query(By.css('.hero')); // find 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.textContent).toContain(expectedPipedName);
+    expect(heroEl.nativeElement.textContent).toContain(expectedPipedName);
  });

  it('should raise selected event when clicked', () => {
@@ -151,12 +114,10 @@ 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: Hero = {id: 42, name: 'Test Name' };
+  hero = new Hero(42, 'Test Name');
  selectedHero: Hero;
  onSelected(hero: Hero) { this.selectedHero = hero; }
 }
@@ -5,17 +5,13 @@ import { Hero } from '../model/hero';

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

 import { DashboardComponent } from './dashboard.component';
-import { Hero }               from '../model/hero';
+import { Hero }               from '../model';

 import { addMatchers }     from '../../testing';
-import { TestHeroService, HeroService } from '../model/testing/test-hero.service';
+import { FakeHeroService } from '../model/testing';

 class FakeRouter {
  navigateByUrl(url: string) { return url;  }
 }

-describe('DashboardComponent class only', () => {
+describe('DashboardComponent: w/o Angular TestBed', () => {
  let comp: DashboardComponent;
-  let heroService: TestHeroService;
+  let heroService: FakeHeroService;
  let router: Router;

  beforeEach(() => {
    addMatchers();
    router = new FakeRouter() as any as Router;
-    heroService = new TestHeroService();
+    heroService = new FakeHeroService();
    comp = new DashboardComponent(router, heroService);
  });

@@ -35,19 +35,17 @@ describe('DashboardComponent class only', () => {

  it('should HAVE heroes after HeroService gets them', (done: DoneFn) => {
    comp.ngOnInit(); // ngOnInit -> getHeroes
-    heroService.lastResult // the one from getHeroes
-      .subscribe(
-        () => {
+    heroService.lastPromise // the one from getHeroes
+      .then(() => {
        // throw new Error('deliberate error'); // see it fail gracefully
        expect(comp.heroes.length).toBeGreaterThan(0,
          'should have heroes after service promise resolves');
-        done();
-      },
-      done.fail);
+      })
+      .then(done, done.fail);
  });

  it('should tell ROUTER to navigate by hero id', () => {
-    const hero: Hero = {id: 42, name: 'Abbracadabra' };
+    const hero = new Hero(42, 'Abbracadabra');
    const spy = spyOn(router, 'navigateByUrl');

    comp.gotoDetail(hero);
@@ -2,9 +2,9 @@
 import { async, inject, ComponentFixture, TestBed
 } from '@angular/core/testing';

-import { addMatchers, asyncData, click } from '../../testing';
-import { HeroService }   from '../model/hero.service';
-import { getTestHeroes } from '../model/testing/test-heroes';
+import { addMatchers, click } from '../../testing';
+import { HeroService }        from '../model';
+import { FakeHeroService }    from '../model/testing';

 import { By }     from '@angular/platform-browser';
 import { Router } from '@angular/router';
@@ -12,6 +12,12 @@ 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;
@@ -31,8 +37,8 @@ describe('DashboardComponent (deep)', () => {
  tests(clickForDeep);

  function clickForDeep() {
-    // get first <div class="hero">
-    const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
+    // get first <div class="hero"> DebugElement
+    const heroEl = fixture.debugElement.query(By.css('.hero'));
    click(heroEl);
  }
 });
@@ -55,32 +61,24 @@ describe('DashboardComponent (shallow)', () => {

  function clickForShallow() {
    // get first <dashboard-hero> DebugElement
-    const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
-    heroDe.triggerEventHandler('selected', comp.heroes[0]);
+    const heroEl = fixture.debugElement.query(By.css('dashboard-hero'));
+    heroEl.triggerEventHandler('selected', comp.heroes[0]);
  }
 });

 /** Add TestBed providers, compile, and create DashboardComponent */
 function compileAndCreate() {
  // #docregion compile-and-create-body
-  beforeEach(async(() => {
-    // #docregion router-spy
-    const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
-    const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);
-
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
      providers: [
-        { provide: HeroService, useValue: heroServiceSpy },
-        { provide: Router,      useValue: routerSpy }
+        { provide: HeroService, useClass: FakeHeroService },
+        { provide: Router,      useClass: RouterStub }
      ]
    })
-    // #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
  }));
@@ -106,11 +104,8 @@ function tests(heroClick: Function) {

  describe('after get dashboard heroes', () => {

-    let router: Router;
-
     // Trigger component so it gets heroes and binds to them
-     beforeEach(async(() => {
-        router = fixture.debugElement.injector.get(Router);
+     beforeEach( async(() => {
        fixture.detectChanges(); // runs ngOnInit -> getHeroes
        fixture.whenStable() // No need for the `lastPromise` hack!
          .then(() => fixture.detectChanges()); // bind to heroes
@@ -124,25 +119,29 @@ 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.nativeElement.querySelectorAll('dashboard-hero');
+      const heroes = fixture.debugElement.queryAll(By.css('dashboard-hero'));
      expect(heroes.length).toBe(4, 'should display 4 heroes');
    });

-    // #docregion navigate-test
-    it('should tell ROUTER to navigate when hero clicked', () => {
+    // #docregion navigate-test, inject
+    it('should tell ROUTER to navigate when hero clicked',
+      inject([Router], (router: Router) => { // ...
+    // #enddocregion inject
+
+      const spy = spyOn(router, 'navigateByUrl');

      heroClick(); // trigger click on first inner <div class="hero">

-      // args passed to router.navigateByUrl() spy
-      const spy = router.navigateByUrl as jasmine.Spy;
+      // args passed to router.navigateByUrl()
      const navArgs = spy.calls.first().args[0];

      // expecting to navigate to id of the component's first hero
      const id = comp.heroes[0].id;
      expect(navArgs).toBe('/heroes/' + id,
        'should nav to HeroDetail for first hero');
-    });
-    // #enddocregion navigate-test
+    // #docregion inject
+    }));
+    // #enddocregion navigate-test, inject
  });
 }

@@ -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()
-      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
+      .then(heroes => this.heroes = heroes.slice(1, 5));
  }

  // #docregion goto-detail
@@ -1,153 +0,0 @@
-// #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
-
-});
@@ -1,706 +0,0 @@
-// #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';
-}
@@ -1,15 +0,0 @@
-// 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 {}
@@ -1,7 +1,7 @@
-import { asyncData, ActivatedRouteStub } from '../../testing';
-
 import { HeroDetailComponent } from './hero-detail.component';
-import { Hero }                from '../model/hero';
+import { Hero }                from '../model';
+
+import { ActivatedRouteStub }  from '../../testing';

 //////////  Tests  ////////////////////

@@ -12,21 +12,22 @@ describe('HeroDetailComponent - no TestBed', () => {
  let hds: any;
  let router: any;

-  beforeEach((done: DoneFn) => {
-    expectedHero = {id: 42, name: 'Bubba' };
-    const activatedRoute = new ActivatedRouteStub({ id: expectedHero.id });
+  beforeEach((done: any) => {
+    expectedHero = new Hero(42, 'Bubba');
+    activatedRoute = new ActivatedRouteStub();
+    activatedRoute.testParamMap = { id: expectedHero.id };
+
    router = jasmine.createSpyObj('router', ['navigate']);

    hds = jasmine.createSpyObj('HeroDetailService', ['getHero', 'saveHero']);
-    hds.getHero.and.returnValue(asyncData(expectedHero));
-    hds.saveHero.and.returnValue(asyncData(expectedHero));
+    hds.getHero.and.returnValue(Promise.resolve(expectedHero));
+    hds.saveHero.and.returnValue(Promise.resolve(expectedHero));

    comp = new HeroDetailComponent(hds, <any> activatedRoute, router);
    comp.ngOnInit();

    // OnInit calls HDS.getHero; wait for it to get the fake hero
-    hds.getHero.calls.first().returnValue.subscribe(done);
-
+    hds.getHero.calls.first().returnValue.then(done);
  });

  it('should expose the hero retrieved from the service', () => {
@@ -44,11 +45,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: DoneFn) => {
+  it('should navigate when click save resolves', (done: any) => {
    comp.save();
    // waits for async save to complete before navigating
    hds.saveHero.calls.first().returnValue
-    .subscribe(() => {
+    .then(() => {
      expect(router.navigate.calls.any()).toBe(true, 'router.navigate called');
      done();
    });
@@ -3,20 +3,21 @@ import {
  async, ComponentFixture, fakeAsync, inject, TestBed, tick
 } from '@angular/core/testing';

-import { Router }       from '@angular/router';
+import { By }           from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';

 import {
-  ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent
+  ActivatedRoute, ActivatedRouteStub, click, newEvent, Router, RouterStub
 } from '../../testing';

-import { Hero }                from '../model/hero';
+import { Hero }                from '../model';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroDetailService }   from './hero-detail.service';
 import { HeroModule }          from './hero.module';

 ////// Testing Vars //////
 let activatedRoute: ActivatedRouteStub;
-let component: HeroDetailComponent;
+let comp: HeroDetailComponent;
 let fixture: ComponentFixture<HeroDetailComponent>;
 let page: Page;

@@ -31,38 +32,36 @@ describe('HeroDetailComponent', () => {
  describe('with SharedModule setup', sharedModuleSetup);
 });

-///////////////////
-
+////////////////////
 function overrideSetup() {
  // #docregion hds-spy
  class HeroDetailServiceSpy {
-    testHero: Hero = {id: 42, name: 'Test Hero' };
+    testHero = new Hero(42, 'Test Hero');

-    /* emit cloned test hero */
    getHero = jasmine.createSpy('getHero').and.callFake(
-      () => asyncData(Object.assign({}, this.testHero))
+      () => Promise
+        .resolve(true)
+        .then(() => Object.assign({}, this.testHero))
    );

-    /* emit clone of test hero, with changes merged in */
    saveHero = jasmine.createSpy('saveHero').and.callFake(
-      (hero: Hero) => asyncData(Object.assign(this.testHero, hero))
+      (hero: Hero) => Promise
+        .resolve(true)
+        .then(() => Object.assign(this.testHero, hero))
    );
  }
-
  // #enddocregion hds-spy

  // the `id` value is irrelevant because ignored by service stub
-  beforeEach(() => activatedRoute.setParamMap({ id: 99999 }));
+  beforeEach(() => activatedRoute.testParamMap = { id: 99999 } );

  // #docregion setup-override
-  beforeEach(async(() => {
-    const routerSpy = createRouterSpy();
-
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
      imports:   [ HeroModule ],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRoute },
-        { provide: Router,         useValue: routerSpy},
+        { provide: Router,         useClass: RouterStub},
  // #enddocregion setup-override
        // HeroDetailService at this level is IRRELEVANT!
        { provide: HeroDetailService, useValue: {} }
@@ -88,7 +87,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;
@@ -109,7 +108,7 @@ function overrideSetup() {
    page.nameInput.value = newName;
    page.nameInput.dispatchEvent(newEvent('input')); // tell Angular

-    expect(component.hero.name).toBe(newName, 'component hero has new name');
+    expect(comp.hero.name).toBe(newName, 'component hero has new name');
    expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save');

    click(page.saveBtn);
@@ -117,40 +116,36 @@ function overrideSetup() {

    tick(); // wait for async save to complete
    expect(hdsSpy.testHero.name).toBe(newName, 'service hero has new name after save');
-    expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
+    expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
  }));
  // #enddocregion override-tests

  it('fixture injected service is not the component injected service',
-    // inject gets the service from the fixture
-    inject([HeroDetailService], (fixtureService: HeroDetailService) => {
+    inject([HeroDetailService], (service: HeroDetailService) => {

-    // use `fixture.debugElement.injector` to get service from component
-    const componentService = fixture.debugElement.injector.get(HeroDetailService);
-
-    expect(fixtureService).not.toBe(componentService, 'service injected from fixture');
+    expect(service).toEqual(<any> {}, 'service injected from fixture');
+    expect(hdsSpy).toBeTruthy('service injected into component');
  }));
 }

 ////////////////////
-import { getTestHeroes, TestHeroService, HeroService } from '../model/testing/test-hero.service';
+import { HEROES, FakeHeroService } from '../model/testing';
+import { HeroService }             from '../model';

-const firstHero = getTestHeroes()[0];
+const firstHero = HEROES[0];

 function heroModuleSetup() {
  // #docregion setup-hero-module
-  beforeEach(async(() => {
-    const routerSpy = createRouterSpy();
-
-    TestBed.configureTestingModule({
+  beforeEach( async(() => {
+     TestBed.configureTestingModule({
      imports:   [ HeroModule ],
  // #enddocregion setup-hero-module
  //  declarations: [ HeroDetailComponent ], // NO!  DOUBLE DECLARATION
  // #docregion setup-hero-module
      providers: [
        { provide: ActivatedRoute, useValue: activatedRoute },
-        { provide: HeroService,    useClass: TestHeroService },
-        { provide: Router,         useValue: routerSpy},
+        { provide: HeroService,    useClass: FakeHeroService },
+        { provide: Router,         useClass: RouterStub},
      ]
    })
    .compileComponents();
@@ -161,9 +156,9 @@ function heroModuleSetup() {
  describe('when navigate to existing hero', () => {
    let expectedHero: Hero;

-    beforeEach(async(() => {
+    beforeEach( async(() => {
      expectedHero = firstHero;
-      activatedRoute.setParamMap({ id: expectedHero.id });
+      activatedRoute.testParamMap = { id: expectedHero.id };
      createComponent();
    }));

@@ -175,7 +170,7 @@ function heroModuleSetup() {

    it('should navigate when click cancel', () => {
      click(page.cancelBtn);
-      expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
+      expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
    });

    it('should save when click save but not navigate immediately', () => {
@@ -186,31 +181,30 @@ function heroModuleSetup() {

      click(page.saveBtn);
      expect(saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called');
-      expect(page.navigateSpy.calls.any()).toBe(false, 'router.navigate not called');
+      expect(page.navSpy.calls.any()).toBe(false, 'router.navigate not called');
    });

    it('should navigate when click save and save resolves', fakeAsync(() => {
      click(page.saveBtn);
      tick(); // wait for async save to complete
-      expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
+      expect(page.navSpy.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';
-      const { nameInput, nameDisplay } = page;

      // simulate user entering new name into the input box
-      nameInput.value = inputName;
+      page.nameInput.value = inputName;

      // dispatch a DOM event so that Angular learns of input value change.
-      nameInput.dispatchEvent(newEvent('input'));
+      page.nameInput.dispatchEvent(newEvent('input'));

      // Tell Angular to update the output span through the title pipe
      fixture.detectChanges();

-      expect(nameDisplay.textContent).toBe(titleCaseName);
+      expect(page.nameDisplay.textContent).toBe(titleCaseName);
    });
    // #enddocregion title-case-pipe
  // #enddocregion selected-tests
@@ -220,10 +214,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(component.hero.id).toBe(0);
+      expect(comp.hero.id).toBe(0);
    });

    it('should display empty hero name', () => {
@@ -234,14 +228,14 @@ function heroModuleSetup() {

  // #docregion route-bad-id
  describe('when navigate to non-existent hero id', () => {
-    beforeEach(async(() => {
-      activatedRoute.setParamMap({ id: 99999 });
+    beforeEach( async(() => {
+      activatedRoute.testParamMap = { id: 99999 };
      createComponent();
    }));

    it('should try to navigate back to hero list', () => {
-      expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called');
-      expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
+      expect(page.gotoSpy.calls.any()).toBe(true, 'comp.gotoList called');
+      expect(page.navSpy.calls.any()).toBe(true, 'router.navigate called');
    });
  });
  // #enddocregion route-bad-id
@@ -269,25 +263,23 @@ import { TitleCasePipe }       from '../shared/title-case.pipe';

 function formsModuleSetup() {
 // #docregion setup-forms-module
-  beforeEach(async(() => {
-    const routerSpy = createRouterSpy();
-
-    TestBed.configureTestingModule({
+  beforeEach( async(() => {
+     TestBed.configureTestingModule({
      imports:      [ FormsModule ],
      declarations: [ HeroDetailComponent, TitleCasePipe ],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRoute },
-        { provide: HeroService,    useClass: TestHeroService },
-        { provide: Router,         useValue: routerSpy},
+        { provide: HeroService,    useClass: FakeHeroService },
+        { provide: Router,         useClass: RouterStub},
      ]
    })
    .compileComponents();
  }));
  // #enddocregion setup-forms-module

-  it('should display 1st hero\'s name', async(() => {
+  it('should display 1st hero\'s name', fakeAsync(() => {
    const expectedHero = firstHero;
-    activatedRoute.setParamMap({ id: expectedHero.id });
+    activatedRoute.testParamMap = { id: expectedHero.id };
    createComponent().then(() => {
      expect(page.nameDisplay.textContent).toBe(expectedHero.name);
    });
@@ -299,25 +291,23 @@ import { SharedModule }        from '../shared/shared.module';

 function sharedModuleSetup() {
  // #docregion setup-shared-module
-  beforeEach(async(() => {
-    const routerSpy = createRouterSpy();
-
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
      imports:      [ SharedModule ],
      declarations: [ HeroDetailComponent ],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRoute },
-        { provide: HeroService,    useClass: TestHeroService },
-        { provide: Router,         useValue: routerSpy},
+        { provide: HeroService,    useClass: FakeHeroService },
+        { provide: Router,         useClass: RouterStub},
      ]
    })
    .compileComponents();
  }));
  // #enddocregion setup-shared-module

-  it('should display 1st hero\'s name', async(() => {
+  it('should display 1st hero\'s name', fakeAsync(() => {
    const expectedHero = firstHero;
-    activatedRoute.setParamMap({ id: expectedHero.id });
+    activatedRoute.testParamMap = { id: expectedHero.id };
    createComponent().then(() => {
      expect(page.nameDisplay.textContent).toBe(expectedHero.name);
    });
@@ -330,51 +320,45 @@ function sharedModuleSetup() {
 /** Create the HeroDetailComponent, initialize it, set test variables  */
 function createComponent() {
  fixture = TestBed.createComponent(HeroDetailComponent);
-  component = fixture.componentInstance;
-  page = new Page(fixture);
+  comp    = fixture.componentInstance;
+  page    = new Page();

  // 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 {
-  // 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'); }
+  gotoSpy:      jasmine.Spy;
+  navSpy:       jasmine.Spy;

-  gotoListSpy: jasmine.Spy;
-  navigateSpy:  jasmine.Spy;
+  saveBtn:      DebugElement;
+  cancelBtn:    DebugElement;
+  nameDisplay:  HTMLElement;
+  nameInput:    HTMLInputElement;

-  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();
+  constructor() {
+    const router = TestBed.get(Router); // get router from root injector
+    this.gotoSpy = spyOn(comp, 'gotoList').and.callThrough();
+    this.navSpy  = spyOn(router, 'navigate');
  }

-  //// query helpers ////
-  private query<T>(selector: string): T {
-    return fixture.nativeElement.querySelector(selector);
-  }
-
-  private queryAll<T>(selector: string): T[] {
-    return fixture.nativeElement.querySelectorAll(selector);
+  /** 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;
+    }
  }
 }
 // #enddocregion page
-
-function createRouterSpy() {
-  return jasmine.createSpyObj('Router', ['navigate']);
-}
@@ -2,6 +2,7 @@
 // #docplaster
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router }   from '@angular/router';
+import 'rxjs/add/operator/map';

 import { Hero }              from '../model/hero';
 import { HeroDetailService } from './hero-detail.service';
@@ -28,18 +29,18 @@ export class HeroDetailComponent implements OnInit {
  // #docregion ng-on-init
  ngOnInit(): void {
    // get hero when `id` param changes
-    this.route.paramMap.subscribe(pmap => this.getHero(pmap.get('id')));
+    this.route.paramMap.subscribe(p => this.getHero(p.has('id') && p.get('id')));
  }
  // #enddocregion ng-on-init

  private getHero(id: string): void {
-    // when no id or id===0, create new blank hero
+    // when no id or id===0, create new hero
    if (!id) {
-      this.hero = { id: 0, name: '' } as Hero;
+      this.hero = new Hero();
      return;
    }

-    this.heroDetailService.getHero(id).subscribe(hero => {
+    this.heroDetailService.getHero(id).then(hero => {
      if (hero) {
        this.hero = hero;
      } else {
@@ -49,7 +50,7 @@ export class HeroDetailComponent implements OnInit {
  }

  save(): void {
-    this.heroDetailService.saveHero(this.hero).subscribe(() => this.gotoList());
+    this.heroDetailService.saveHero(this.hero).then(() => this.gotoList());
  }

  cancel() { this.gotoList(); }
@@ -1,8 +1,5 @@
 import { Injectable } from '@angular/core';

-import { Observable } from 'rxjs/Observable';
-import { map } from 'rxjs/operators';
-
 import { Hero } from '../model/hero';
 import { HeroService } from '../model/hero.service';

@@ -13,15 +10,13 @@ export class HeroDetailService {
 // #enddocregion prototype

  // Returns a clone which caller may modify safely
-  getHero(id: number | string): Observable<Hero> {
+  getHero(id: number | string): Promise<Hero> {
    if (typeof id === 'string') {
      id = parseInt(id as string, 10);
    }
-    return this.heroService.getHero(id).pipe(
-      map(hero => {
-        return hero ? Object.assign({}, hero) : null; // clone or null
-      })
-    );
+    return this.heroService.getHero(id).then(hero => {
+      return hero ? Object.assign({}, hero) : null; // clone or null
+    });
  }

  saveHero(hero: Hero) {
@@ -6,7 +6,7 @@
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
-  width: 15em;
+  width: 10em;
 }
 .heroes li {
  cursor: pointer;
@@ -4,18 +4,15 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick
 import { By }           from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';

-import { Router }       from '@angular/router';
+import { addMatchers, newEvent, Router, RouterStub
+} from '../../testing';

-import { addMatchers, newEvent } from '../../testing';
-
-import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service';
+import { HEROES, FakeHeroService } from '../model/testing';

 import { HeroModule }         from './hero.module';
 import { HeroListComponent }  from './hero-list.component';
 import { HighlightDirective } from '../shared/highlight.directive';
-import { HeroService }        from '../model/hero.service';
-
-const HEROES = getTestHeroes();
+import { HeroService }        from '../model';

 let comp: HeroListComponent;
 let fixture: ComponentFixture<HeroListComponent>;
@@ -25,15 +22,13 @@ let page: Page;

 describe('HeroListComponent', () => {

-  beforeEach(async(() => {
+  beforeEach( async(() => {
    addMatchers();
-    const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
-
    TestBed.configureTestingModule({
      imports: [HeroModule],
      providers: [
-        { provide: HeroService, useClass: TestHeroService },
-        { provide: Router,      useValue: routerSpy}
+        { provide: HeroService, useClass: FakeHeroService },
+        { provide: Router,      useClass: RouterStub}
      ]
    })
    .compileComponents()
@@ -130,14 +125,15 @@ class Page {
  navSpy: jasmine.Spy;

  constructor() {
-    const heroRowNodes = fixture.nativeElement.querySelectorAll('li');
-    this.heroRows = Array.from(heroRowNodes);
+    this.heroRows    = fixture.debugElement.queryAll(By.css('li')).map(de => de.nativeElement);

    // Find the first element with an attached HighlightDirective
    this.highlightDe = fixture.debugElement.query(By.directive(HighlightDirective));

-    // Get the component's injected router navigation spy
-    const routerSpy = fixture.debugElement.injector.get(Router);
-    this.navSpy = routerSpy.navigate as jasmine.Spy;
+    // Get the component's injected router and spy on it
+    const router = fixture.debugElement.injector.get(Router);
+    this.navSpy = spyOn(router, 'navigate');
  };
 }
+
+
@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router }            from '@angular/router';

-import { Observable } from 'rxjs/Observable';
-
 import { Hero } from '../model/hero';
 import { HeroService } from '../model/hero.service';

@@ -12,7 +10,7 @@ import { HeroService } from '../model/hero.service';
  styleUrls: [ './hero-list.component.css' ]
 })
 export class HeroListComponent implements OnInit {
-  heroes: Observable<Hero[]>;
+  heroes: Promise<Hero[]>;
  selectedHero: Hero;

  constructor(
@@ -1,26 +0,0 @@
-// #docregion , init
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-import { QUOTES } from './twain/twain.data';
-
-// Adjust to reduce number of quotes
-const maxQuotes = Infinity; // 0;
-
-/** Create in-memory database of heroes and quotes */
-export class InMemoryDataService implements InMemoryDbService {
-  createDb() {
-    const heroes = [
-      { id: 11, name: 'Mr. Nice' },
-      { id: 12, name: 'Narco' },
-      { id: 13, name: 'Bombasto' },
-      { id: 14, name: 'Celeritas' },
-      { id: 15, name: 'Magneta' },
-      { id: 16, name: 'RubberMan' },
-      { id: 17, name: 'Dynama' },
-      { id: 18, name: 'Dr IQ' },
-      { id: 19, name: 'Magma' },
-      { id: 20, name: 'Tornado' }
-    ];
-
-    return { heroes, quotes: QUOTES.slice(0, maxQuotes) };
-  }
-}
@@ -1,215 +0,0 @@
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-
-// Other imports
-import { TestBed } from '@angular/core/testing';
-import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
-
-import { asyncData, asyncError } from '../../testing/async-observable-helpers';
-
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
-
-describe ('HeroesService (with spies)', () => {
-  // #docregion test-with-spies
-  let httpClientSpy: { get: jasmine.Spy };
-  let heroService: HeroService;
-
-  beforeEach(() => {
-    // Todo: spy on other methods too
-    httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
-    heroService = new HeroService(<any> httpClientSpy);
-  });
-
-  it('should return expected heroes (HttpClient called once)', () => {
-    const expectedHeroes: Hero[] =
-      [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
-
-    httpClientSpy.get.and.returnValue(asyncData(expectedHeroes));
-
-    heroService.getHeroes().subscribe(
-      heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
-      fail
-    );
-    expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
-  });
-
-  it('should return an error when the server returns a 404', () => {
-    const errorResponse = new HttpErrorResponse({
-      error: 'test 404 error',
-      status: 404, statusText: 'Not Found'
-    });
-
-    httpClientSpy.get.and.returnValue(asyncError(errorResponse));
-
-    heroService.getHeroes().subscribe(
-      heroes => fail('expected an error, not heroes'),
-      error  => expect(error.message).toContain('test 404 error')
-    );
-  });
-  // #enddocregion test-with-spies
-
-});
-
-describe('HeroesService (with mocks)', () => {
-  let httpClient: HttpClient;
-  let httpTestingController: HttpTestingController;
-  let heroService: HeroService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      // Import the HttpClient mocking services
-      imports: [ HttpClientTestingModule ],
-      // Provide the service-under-test
-      providers: [ HeroService ]
-    });
-
-    // Inject the http, test controller, and service-under-test
-    // as they will be referenced by each test.
-    httpClient = TestBed.get(HttpClient);
-    httpTestingController = TestBed.get(HttpTestingController);
-    heroService = TestBed.get(HeroService);
-  });
-
-  afterEach(() => {
-    // After every test, assert that there are no more pending requests.
-    httpTestingController.verify();
-  });
-
-  /// HeroService method tests begin ///
-  describe('#getHeroes', () => {
-    let expectedHeroes: Hero[];
-
-    beforeEach(() => {
-      heroService = TestBed.get(HeroService);
-      expectedHeroes = [
-        { id: 1, name: 'A' },
-        { id: 2, name: 'B' },
-       ] as Hero[];
-    });
-
-    it('should return expected heroes (called once)', () => {
-      heroService.getHeroes().subscribe(
-        heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
-        fail
-      );
-
-      // HeroService should have made one request to GET heroes from expected URL
-      const req = httpTestingController.expectOne(heroService.heroesUrl);
-      expect(req.request.method).toEqual('GET');
-
-      // Respond with the mock heroes
-      req.flush(expectedHeroes);
-    });
-
-    it('should be OK returning no heroes', () => {
-      heroService.getHeroes().subscribe(
-        heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'),
-        fail
-      );
-
-      const req = httpTestingController.expectOne(heroService.heroesUrl);
-      req.flush([]); // Respond with no heroes
-    });
-
-    it('should turn 404 into a user-friendly error', () => {
-      const msg = 'Deliberate 404';
-      heroService.getHeroes().subscribe(
-        heroes => fail('expected to fail'),
-        error => expect(error.message).toContain(msg)
-      );
-
-      const req = httpTestingController.expectOne(heroService.heroesUrl);
-
-      // respond with a 404 and the error message in the body
-      req.flush(msg, {status: 404, statusText: 'Not Found'});
-    });
-
-    it('should return expected heroes (called multiple times)', () => {
-      heroService.getHeroes().subscribe();
-      heroService.getHeroes().subscribe();
-      heroService.getHeroes().subscribe(
-        heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
-        fail
-      );
-
-      const requests = httpTestingController.match(heroService.heroesUrl);
-      expect(requests.length).toEqual(3, 'calls to getHeroes()');
-
-      // Respond to each request with different mock hero results
-      requests[0].flush([]);
-      requests[1].flush([{id: 1, name: 'bob'}]);
-      requests[2].flush(expectedHeroes);
-    });
-  });
-
-  describe('#updateHero', () => {
-    // Expecting the query form of URL so should not 404 when id not found
-    const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`;
-
-    it('should update a hero and return it', () => {
-
-      const updateHero: Hero = { id: 1, name: 'A' };
-
-      heroService.updateHero(updateHero).subscribe(
-        data => expect(data).toEqual(updateHero, 'should return the hero'),
-        fail
-      );
-
-      // HeroService should have made one request to PUT hero
-      const req = httpTestingController.expectOne(heroService.heroesUrl);
-      expect(req.request.method).toEqual('PUT');
-      expect(req.request.body).toEqual(updateHero);
-
-      // Expect server to return the hero after PUT
-      const expectedResponse = new HttpResponse(
-        { status: 200, statusText: 'OK', body: updateHero });
-      req.event(expectedResponse);
-    });
-
-    it('should turn 404 error into user-facing error', () => {
-      const msg = 'Deliberate 404';
-      const updateHero: Hero = { id: 1, name: 'A' };
-      heroService.updateHero(updateHero).subscribe(
-        heroes => fail('expected to fail'),
-        error => expect(error.message).toContain(msg)
-      );
-
-      const req = httpTestingController.expectOne(heroService.heroesUrl);
-
-      // respond with a 404 and the error message in the body
-      req.flush(msg, {status: 404, statusText: 'Not Found'});
-    });
-
-    // #docregion network-error
-    it('should turn network error into user-facing error', () => {
-      const emsg = 'simulated network error';
-
-      const updateHero: Hero = { id: 1, name: 'A' };
-      heroService.updateHero(updateHero).subscribe(
-        heroes => fail('expected to fail'),
-        error => expect(error.message).toContain(emsg)
-      );
-
-      const req = httpTestingController.expectOne(heroService.heroesUrl);
-
-      // Create mock ErrorEvent, raised when something goes wrong at the network level.
-      // Connection timeout, DNS error, offline, etc
-      const errorEvent = new ErrorEvent('so sad', {
-        message: emsg,
-        // #enddocregion network-error
-        // The rest of this is optional and not used.
-        // Just showing that you could provide this too.
-        filename: 'HeroService.ts',
-        lineno: 42,
-        colno: 21
-      // #docregion network-error
-      });
-
-      // Respond with mock error
-      req.error(errorEvent);
-    });
-    // #enddocregion network-error
-  });
-
-  // TODO: test other HeroService methods
-});
@@ -1,98 +1,30 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';

-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-import { catchError, map, tap } from 'rxjs/operators';
-
-import { Hero } from './hero';
-
-const httpOptions = {
-  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
-};
+import { Hero }       from './hero';
+import { HEROES }     from './test-heroes';

@Injectable()
+/** Dummy HeroService. Pretend it makes real http requests */
 export class HeroService {
-
-  readonly heroesUrl = 'api/heroes';  // URL to web api
-
-  constructor(private http: HttpClient) { }
-
-  /** GET heroes from the server */
-  getHeroes (): Observable<Hero[]> {
-    return this.http.get<Hero[]>(this.heroesUrl)
-      .pipe(
-        tap(heroes => this.log(`fetched heroes`)),
-        catchError(this.handleError('getHeroes'))
-      ) as Observable<Hero[]>;
+  getHeroes() {
+    return Promise.resolve(HEROES);
  }

-  /** GET hero by id. Return `undefined` when id not found */
-  getHero<Data>(id: number | string): Observable<Hero> {
+  getHero(id: number | string): Promise<Hero> {
    if (typeof id === 'string') {
      id = parseInt(id as string, 10);
    }
-    const url = `${this.heroesUrl}/?id=${id}`;
-    return this.http.get<Hero[]>(url)
-      .pipe(
-        map(heroes => heroes[0]), // returns a {0|1} element array
-        tap(h => {
-          const outcome = h ? `fetched` : `did not find`;
-          this.log(`${outcome} hero id=${id}`);
-        }),
-        catchError(this.handleError<Hero>(`getHero id=${id}`))
-      );
-  }
-
-  //////// Save methods //////////
-
-  /** POST: add a new hero to the server */
-  addHero (hero: Hero): Observable<Hero> {
-    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
-      tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
-      catchError(this.handleError<Hero>('addHero'))
-    );
-  }
-  /** DELETE: delete the hero from the server */
-  deleteHero (hero: Hero | number): Observable<Hero> {
-    const id = typeof hero === 'number' ? hero : hero.id;
-    const url = `${this.heroesUrl}/${id}`;
-
-    return this.http.delete<Hero>(url, httpOptions).pipe(
-      tap(_ => this.log(`deleted hero id=${id}`)),
-      catchError(this.handleError<Hero>('deleteHero'))
+    return this.getHeroes().then(
+      heroes => heroes.find(hero => hero.id === id)
    );
  }

-  /** PUT: update the hero on the server */
-  updateHero (hero: Hero): Observable<any> {
-    return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
-      tap(_ => this.log(`updated hero id=${hero.id}`)),
-      catchError(this.handleError<any>('updateHero'))
-    );
-  }
-  /**
-   * Returns a function that handles Http operation failures.
-   * This error handler lets the app continue to run as if no error occurred.
-   * @param operation - name of the operation that failed
-   */
-  private handleError<T> (operation = 'operation') {
-    return (error: HttpErrorResponse): Observable<T> => {
-
-      // TODO: send the error to remote logging infrastructure
-      console.error(error); // log to console instead
-
-      const message = (error.error instanceof ErrorEvent) ?
-        error.error.message :
-       `server returned code ${error.status} with body "${error.error}"`;
-
-      // TODO: better job of transforming error for user consumption
-      throw new Error(`${operation} failed: ${message}`);
-    };
-
-  }
-
-  private log(message: string) {
-    console.log('HeroService: ' + message);
+  updateHero(hero: Hero): Promise<Hero> {
+    return this.getHero(hero.id).then(h => {
+      if (!h) {
+        throw new Error(`Hero ${hero.id} not found`);
+      }
+      return Object.assign(h, hero);
+    });
  }
 }
@@ -0,0 +1,20 @@
+// #docregion
+import { Hero } from './hero';
+
+describe('Hero', () => {
+  it('has name', () => {
+    const hero = new Hero(1, 'Super Cat');
+    expect(hero.name).toBe('Super Cat');
+  });
+
+  it('has id', () => {
+    const hero = new Hero(1, 'Super Cat');
+    expect(hero.id).toBe(1);
+  });
+
+  it('can clone itself', () => {
+    const hero = new Hero(1, 'Super Cat');
+    const clone = hero.clone();
+    expect(hero).toEqual(clone);
+  });
+});
@@ -1,8 +1,4 @@
-export interface Hero {
-  id: number;
-  name: string;
+export class Hero {
+  constructor(public id = 0, public name = '') { }
+  clone() { return new Hero(this.id, this.name); }
 }
-
-// SystemJS bug:
-// TS file must export something real in JS, not just interfaces
-export const _dummy = undefined;
@@ -1,6 +1,3 @@
-/**
- * Test the HeroService when implemented with the OLD HttpModule
- */
 import {
   async, inject, TestBed
 } from '@angular/core/testing';
@@ -15,11 +12,14 @@ import {
 } from '@angular/http';

 import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-import { catchError, tap } from 'rxjs/operators';
+import 'rxjs/add/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/toPromise';

 import { Hero } from './hero';
-import { HttpHeroService } from './http-hero.service';
+import { HttpHeroService as HeroService } from './http-hero.service';

 const makeHeroData = () => [
  { id: 1, name: 'Windstorm' },
@@ -29,100 +29,99 @@ const makeHeroData = () => [
 ] as Hero[];

 ////////  Tests  /////////////
-describe('HttpHeroService (using old HttpModule)', () => {
-  let backend: MockBackend;
-  let service: HttpHeroService;
+describe('Http-HeroService (mockBackend)', () => {

-  beforeEach( () => {
+  beforeEach( async(() => {
    TestBed.configureTestingModule({
      imports: [ HttpModule ],
      providers: [
-        HttpHeroService,
+        HeroService,
        { provide: XHRBackend, useClass: MockBackend }
      ]
-    });
-  });
+    })
+    .compileComponents();
+  }));

-  it('can instantiate service via DI', () => {
-      service = TestBed.get(HttpHeroService);
-      expect(service instanceof HttpHeroService).toBe(true);
-  });
+  it('can instantiate service when inject service',
+    inject([HeroService], (service: HeroService) => {
+      expect(service instanceof HeroService).toBe(true);
+  }));

-  it('can instantiate service with "new"', () => {
-    const http = TestBed.get(Http);
+
+
+  it('can instantiate service with "new"', inject([Http], (http: Http) => {
    expect(http).not.toBeNull('http should be provided');
-    let service = new HttpHeroService(http);
-    expect(service instanceof HttpHeroService).toBe(true, 'new service should be ok');
-  });
+    let service = new HeroService(http);
+    expect(service instanceof HeroService).toBe(true, 'new service should be ok');
+  }));

-  it('can provide the mockBackend as XHRBackend', () => {
-    const backend = TestBed.get(XHRBackend);
-    expect(backend).not.toBeNull('backend should be provided');
-  });
+
+  it('can provide the mockBackend as XHRBackend',
+    inject([XHRBackend], (backend: MockBackend) => {
+      expect(backend).not.toBeNull('backend should be provided');
+  }));

  describe('when getHeroes', () => {
-    let fakeHeroes: Hero[];
-    let http: Http;
-    let response: Response;
+      let backend: MockBackend;
+      let service: HeroService;
+      let fakeHeroes: Hero[];
+      let response: Response;

-    beforeEach(() => {
+      beforeEach(inject([Http, XHRBackend], (http: Http, be: MockBackend) => {
+        backend = be;
+        service = new HeroService(http);
+        fakeHeroes = makeHeroData();
+        let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
+        response = new Response(options);
+      }));

-      backend = TestBed.get(XHRBackend);
-      http = TestBed.get(Http);
+      it('should have expected fake heroes (then)', async(inject([], () => {
+        backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));

-      service = new HttpHeroService(http);
-      fakeHeroes = makeHeroData();
-      let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
-      response = new Response(options);
-    });
+        service.getHeroes().toPromise()
+        // .then(() => Promise.reject('deliberate'))
+          .then(heroes => {
+            expect(heroes.length).toBe(fakeHeroes.length,
+              'should have expected no. of heroes');
+          });
+      })));

-    it('should have expected fake heroes (then)', () => {
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
+      it('should have expected fake heroes (Observable.do)', async(inject([], () => {
+        backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));

-      service.getHeroes().toPromise()
-      // .then(() => Promise.reject('deliberate'))
-        .then(heroes => {
-          expect(heroes.length).toBe(fakeHeroes.length,
-            'should have expected no. of heroes');
-        })
-        .catch(fail);
-    });
-
-    it('should have expected fake heroes (Observable tap)', () => {
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
-
-      service.getHeroes().subscribe(
-        heroes => {
-          expect(heroes.length).toBe(fakeHeroes.length,
-            'should have expected no. of heroes');
-        },
-        fail
-      );
-    });
+        service.getHeroes()
+          .do(heroes => {
+            expect(heroes.length).toBe(fakeHeroes.length,
+              'should have expected no. of heroes');
+          })
+          .toPromise();
+      })));


-    it('should be OK returning no heroes', () => {
-      let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+      it('should be OK returning no heroes', async(inject([], () => {
+        let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
+        backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));

-      service.getHeroes().subscribe(
-        heroes => {
-          expect(heroes.length).toBe(0, 'should have no heroes');
-        },
-        fail
-      );
-    });
+        service.getHeroes()
+          .do(heroes => {
+            expect(heroes.length).toBe(0, 'should have no heroes');
+          })
+          .toPromise();
+      })));

-    it('should treat 404 as an Observable error', () => {
-      let resp = new Response(new ResponseOptions({status: 404}));
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
+      it('should treat 404 as an Observable error', async(inject([], () => {
+        let resp = new Response(new ResponseOptions({status: 404}));
+        backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));

-      service.getHeroes().subscribe(
-        heroes => fail('should not respond with heroes'),
-        err => {
-          expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
-          return of(null); // failure is the expected test result
-        });
-    });
+        service.getHeroes()
+          .do(heroes => {
+            fail('should not respond with heroes');
+          })
+          .catch(err => {
+            expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
+            return Observable.of(null); // failure is the expected test result
+          })
+          .toPromise();
+      })));
  });
 });
@@ -1,4 +1,3 @@
-// The OLD Http module. See HeroService for use of the current HttpClient
 // #docplaster
 // #docregion
 import { Injectable }     from '@angular/core';
@@ -6,9 +5,12 @@ import { Http, Response } from '@angular/http';
 import { Headers, RequestOptions } from '@angular/http';
 import { Hero }           from './hero';

-import { Observable } from 'rxjs/Observable';
-import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
-import { catchError, map, tap } from 'rxjs/operators';
+import { Observable }     from 'rxjs/Observable';
+import 'rxjs/add/observable/throw';
+
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';

@Injectable()
 export class HttpHeroService {
@@ -17,17 +19,16 @@ export class HttpHeroService {
  constructor (private http: Http) {}

  getHeroes (): Observable<Hero[]> {
-    return this.http.get(this._heroesUrl).pipe(
-      map(this.extractData),
-      // tap(data => console.log(data)), // eyeball results in the console
-      catchError(this.handleError)
-    );
+    return this.http.get(this._heroesUrl)
+                    .map(this.extractData)
+                    // .do(data => console.log(data)) // eyeball results in the console
+                    .catch(this.handleError);
  }

  getHero(id: number | string) {
-    return this.http.get('app/heroes/?id=${id}').pipe(
-      map((r: Response) => r.json().data as Hero[])
-    );
+    return this.http
+            .get('app/heroes/?id=${id}')
+            .map((r: Response) => r.json().data as Hero[]);
  }

  addHero (name: string): Observable<Hero>  {
@@ -35,10 +36,9 @@ export class HttpHeroService {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

-    return this.http.post(this._heroesUrl, body, options).pipe(
-      map(this.extractData),
-      catchError(this.handleError)
-    );
+    return this.http.post(this._heroesUrl, body, options)
+                    .map(this.extractData)
+                    .catch(this.handleError);
  }

  updateHero (hero: Hero): Observable<Hero>  {
@@ -46,10 +46,9 @@ export class HttpHeroService {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

-    return this.http.put(this._heroesUrl, body, options).pipe(
-      map(this.extractData),
-      catchError(this.handleError)
-    );
+    return this.http.put(this._heroesUrl, body, options)
+                    .map(this.extractData)
+                    .catch(this.handleError);
  }

  private extractData(res: Response) {
@@ -64,6 +63,6 @@ export class HttpHeroService {
    // In a real world app, we might send the error to remote logging infrastructure
    let errMsg = error.message || 'Server error';
    console.error(errMsg); // log to console instead
-    return new ErrorObservable(errMsg);
+    return Observable.throw(errMsg);
  }
 }
@@ -0,0 +1,11 @@
+// #docregion
+import { Hero } from './hero';
+
+export const HEROES: Hero[] = [
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan')
+];
@@ -0,0 +1,41 @@
+// re-export for tester convenience
+export { Hero }        from '../hero';
+export { HeroService } from '../hero.service';
+
+import { Hero }        from '../hero';
+import { HeroService } from '../hero.service';
+
+export const HEROES: Hero[] = [
+  new Hero(41, 'Bob'),
+  new Hero(42, 'Carol'),
+  new Hero(43, 'Ted'),
+  new Hero(44, 'Alice'),
+  new Hero(45, 'Speedy'),
+  new Hero(46, 'Stealthy')
+];
+
+export class FakeHeroService implements HeroService {
+
+  heroes = HEROES.map(h => h.clone());
+  lastPromise: Promise<any>;  // remember so we can spy on promise calls
+
+  getHero(id: number | string) {
+    if (typeof id === 'string') {
+      id = parseInt(id as string, 10);
+    }
+    let hero = this.heroes.find(h => h.id === id);
+    return this.lastPromise = Promise.resolve(hero);
+  }
+
+  getHeroes() {
+    return this.lastPromise = Promise.resolve<Hero[]>(this.heroes);
+  }
+
+  updateHero(hero: Hero): Promise<Hero> {
+    return this.lastPromise = this.getHero(hero.id).then(h => {
+      return h ?
+        Object.assign(h, hero) :
+        Promise.reject(`Hero ${hero.id} not found`) as any as Promise<Hero>;
+    });
+  }
+}
@@ -1,192 +0,0 @@
-// #docplaster
-// #docregion imports
-// Http testing module and mocking controller
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-
-// Other imports
-import { TestBed } from '@angular/core/testing';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-
-// #enddocregion imports
-import { HttpHeaders } from '@angular/common/http';
-
-interface Data {
-  name: string;
-}
-
-const testUrl = '/data';
-
-// #docregion setup
-describe('HttpClient testing', () => {
-  let httpClient: HttpClient;
-  let httpTestingController: HttpTestingController;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [ HttpClientTestingModule ]
-    });
-
-    // Inject the http service and test controller for each test
-    httpClient = TestBed.get(HttpClient);
-    httpTestingController = TestBed.get(HttpTestingController);
-  });
-  // #enddocregion setup
-  // #docregion afterEach
-  afterEach(() => {
-    // After every test, assert that there are no more pending requests.
-    httpTestingController.verify();
-  });
-  // #enddocregion afterEach
-  // #docregion setup
-  /// Tests begin ///
-  // #enddocregion setup
-  // #docregion get-test
-  it('can test HttpClient.get', () => {
-    const testData: Data = {name: 'Test Data'};
-
-    // Make an HTTP GET request
-    httpClient.get<Data>(testUrl)
-      .subscribe(data =>
-        // When observable resolves, result should match test data
-        expect(data).toEqual(testData)
-      );
-
-    // The following `expectOne()` will match the request's URL.
-    // If no requests or multiple requests matched that URL
-    // `expectOne()` would throw.
-    const req = httpTestingController.expectOne('/data');
-
-    // Assert that the request is a GET.
-    expect(req.request.method).toEqual('GET');
-
-    // Respond with mock data, causing Observable to resolve.
-    // Subscribe callback asserts that correct data was returned.
-    req.flush(testData);
-
-    // Finally, assert that there are no outstanding requests.
-    httpTestingController.verify();
-  });
-  // #enddocregion get-test
-  it('can test HttpClient.get with matching header', () => {
-    const testData: Data = {name: 'Test Data'};
-
-    // Make an HTTP GET request with specific header
-    httpClient.get<Data>(testUrl, {
-        headers: new HttpHeaders({'Authorization': 'my-auth-token'})
-      })
-      .subscribe(data =>
-        expect(data).toEqual(testData)
-      );
-
-      // Find request with a predicate function.
-    // #docregion predicate
-    // Expect one request with an authorization header
-    const req = httpTestingController.expectOne(
-      req => req.headers.has('Authorization')
-    );
-    // #enddocregion predicate
-    req.flush(testData);
-  });
-
-  it('can test multiple requests', () => {
-    let testData: Data[] = [
-      { name: 'bob' }, { name: 'carol' },
-      { name: 'ted' }, { name: 'alice' }
-    ];
-
-    // Make three requests in a row
-    httpClient.get<Data[]>(testUrl)
-      .subscribe(d => expect(d.length).toEqual(0, 'should have no data'));
-
-    httpClient.get<Data[]>(testUrl)
-      .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array'));
-
-    httpClient.get<Data[]>(testUrl)
-      .subscribe(d => expect(d).toEqual(testData, 'should be expected data'));
-
-    // #docregion multi-request
-    // get all pending requests that match the given URL
-    const requests = httpTestingController.match(testUrl);
-    expect(requests.length).toEqual(3);
-
-    // Respond to each request with different results
-    requests[0].flush([]);
-    requests[1].flush([testData[0]]);
-    requests[2].flush(testData);
-    // #enddocregion multi-request
-  });
-
-  // #docregion 404
-  it('can test for 404 error', () => {
-    const emsg = 'deliberate 404 error';
-
-    httpClient.get<Data[]>(testUrl).subscribe(
-      data => fail('should have failed with the 404 error'),
-      (error: HttpErrorResponse) => {
-        expect(error.status).toEqual(404, 'status');
-        expect(error.error).toEqual(emsg, 'message');
-      }
-    );
-
-    const req = httpTestingController.expectOne(testUrl);
-
-    // Respond with mock error
-    req.flush(emsg, { status: 404, statusText: 'Not Found' });
-  });
-  // #enddocregion 404
-
-  // #docregion network-error
-  it('can test for network error', () => {
-    const emsg = 'simulated network error';
-
-    httpClient.get<Data[]>(testUrl).subscribe(
-      data => fail('should have failed with the network error'),
-      (error: HttpErrorResponse) => {
-        expect(error.error.message).toEqual(emsg, 'message');
-      }
-    );
-
-    const req = httpTestingController.expectOne(testUrl);
-
-    // Create mock ErrorEvent, raised when something goes wrong at the network level.
-    // Connection timeout, DNS error, offline, etc
-    const errorEvent = new ErrorEvent('so sad', {
-      message: emsg,
-      // #enddocregion network-error
-      // The rest of this is optional and not used.
-      // Just showing that you could provide this too.
-      filename: 'HeroService.ts',
-      lineno: 42,
-      colno: 21
-    // #docregion network-error
-    });
-
-    // Respond with mock error
-    req.error(errorEvent);
-  });
-  // #enddocregion network-error
-
-  it('httpTestingController.verify should fail if HTTP response not simulated', () => {
-    // Sends request
-    httpClient.get('some/api').subscribe();
-
-    // verify() should fail because haven't handled the pending request.
-    expect(() => httpTestingController.verify()).toThrow();
-
-    // Now get and flush the request so that afterEach() doesn't fail
-    const req = httpTestingController.expectOne('some/api');
-    req.flush(null);
-  });
-
-  // Proves that verify in afterEach() really would catch error
-  // if test doesn't simulate the HTTP response.
-  //
-  // Must disable this test because can't catch an error in an afterEach().
-  // Uncomment if you want to confirm that afterEach() does the job.
-  // it('afterEach() should fail when HTTP response not simulated',() => {
-  //   // Sends request which is never handled by this test
-  //   httpClient.get('some/api').subscribe();
-  // });
-// #docregion setup
-});
-// #enddocregion setup
@@ -1,61 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { Observable } from 'rxjs/Observable';
-import { asyncData } from '../../../testing';
-
-import { map } from 'rxjs/operators';
-
-// re-export for tester convenience
-export { Hero }          from '../hero';
-export { HeroService }   from '../hero.service';
-export { getTestHeroes } from './test-heroes';
-
-import { Hero }          from '../hero';
-import { HeroService }   from '../hero.service';
-import { getTestHeroes } from './test-heroes';
-
-@Injectable()
-/**
- * FakeHeroService pretends to make real http requests.
- * implements only as much of HeroService as is actually consumed by the app
-*/
-export class TestHeroService extends HeroService {
-
-  constructor() {
-    super(null);
-  }
-
-  heroes = getTestHeroes();
-  lastResult: Observable<any>; // result from last method call
-
-  addHero(hero: Hero): Observable<Hero> {
-    throw new Error('Method not implemented.');
-  }
-
-  deleteHero(hero: number | Hero): Observable<Hero> {
-    throw new Error('Method not implemented.');
-  }
-
-  getHeroes(): Observable<Hero[]> {
-    return this.lastResult = asyncData(this.heroes);
-  }
-
-  getHero(id: number | string): Observable<Hero> {
-    if (typeof id === 'string') {
-      id = parseInt(id as string, 10);
-    }
-    let hero = this.heroes.find(h => h.id === id);
-    return this.lastResult = asyncData(hero);
-  }
-
-  updateHero(hero: Hero): Observable<Hero> {
-    return this.lastResult = this.getHero(hero.id).pipe(
-      map(h => {
-        if (h) {
-          return Object.assign(h, hero);
-        }
-        throw new Error(`Hero ${hero.id} not found`);
-      })
-    );
-  }
-}
@@ -1,13 +0,0 @@
-import { Hero } from '../hero';
-
-/** return fresh array of test heroes */
-export function getTestHeroes(): Hero[] {
-  return [
-    {id: 41, name: 'Bob' },
-    {id: 42, name: 'Carol' },
-    {id: 43, name: 'Ted' },
-    {id: 44, name: 'Alice' },
-    {id: 45, name: 'Speedy' },
-    {id: 46, name: 'Stealthy' }
-  ];
-}
@@ -4,16 +4,12 @@ import { FormsModule }   from '@angular/forms';

 import { HighlightDirective } from './highlight.directive';
 import { TitleCasePipe }      from './title-case.pipe';
+import { TwainComponent }     from './twain.component';

@NgModule({
-  imports: [ CommonModule ],
-  exports: [
-    CommonModule,
-    // SharedModule importers won't have to import FormsModule too
-    FormsModule,
-    HighlightDirective,
-    TitleCasePipe
-  ],
-  declarations: [ HighlightDirective, TitleCasePipe ]
+  imports:      [ CommonModule ],
+  exports:      [ CommonModule, FormsModule,
+                  HighlightDirective, TitleCasePipe, TwainComponent ],
+  declarations: [ HighlightDirective, TitleCasePipe, TwainComponent ]
 })
 export class SharedModule { }
@@ -0,0 +1,92 @@
+// #docplaster
+import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+import { By }                        from '@angular/platform-browser';
+import { DebugElement }              from '@angular/core';
+
+import { TwainService }   from './twain.service';
+import { TwainComponent } from './twain.component';
+
+describe('TwainComponent', () => {
+
+  let comp: TwainComponent;
+  let fixture: ComponentFixture<TwainComponent>;
+
+  let spy: jasmine.Spy;
+  let de: DebugElement;
+  let el: HTMLElement;
+  let twainService: TwainService; // the actually injected service
+
+  const testQuote = 'Test Quote';
+
+  // #docregion setup
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+       declarations: [ TwainComponent ],
+       providers:    [ TwainService ],
+    });
+
+    fixture = TestBed.createComponent(TwainComponent);
+    comp    = fixture.componentInstance;
+
+    // TwainService actually injected into the component
+    twainService = fixture.debugElement.injector.get(TwainService);
+
+    // Setup spy on the `getQuote` method
+    // #docregion spy
+    spy = spyOn(twainService, 'getQuote')
+          .and.returnValue(Promise.resolve(testQuote));
+    // #enddocregion spy
+
+    // Get the Twain quote element by CSS selector (e.g., by class name)
+    de = fixture.debugElement.query(By.css('.twain'));
+    el = de.nativeElement;
+  });
+  // #enddocregion setup
+
+  // #docregion tests
+  it('should not show quote before OnInit', () => {
+    expect(el.textContent).toBe('', 'nothing displayed');
+    expect(spy.calls.any()).toBe(false, 'getQuote not yet called');
+  });
+
+  it('should still not show quote after component initialized', () => {
+    fixture.detectChanges();
+    // getQuote service is async => still has not returned with quote
+    expect(el.textContent).toBe('...', 'no quote yet');
+    expect(spy.calls.any()).toBe(true, 'getQuote called');
+  });
+
+  // #docregion async-test
+  it('should show quote after getQuote promise (async)', async(() => {
+    fixture.detectChanges();
+
+    fixture.whenStable().then(() => { // wait for async getQuote
+      fixture.detectChanges();        // update view with quote
+      expect(el.textContent).toBe(testQuote);
+    });
+  }));
+  // #enddocregion async-test
+
+  // #docregion fake-async-test
+  it('should show quote after getQuote promise (fakeAsync)', fakeAsync(() => {
+    fixture.detectChanges();
+    tick();                  // wait for async getQuote
+    fixture.detectChanges(); // update view with quote
+    expect(el.textContent).toBe(testQuote);
+  }));
+  // #enddocregion fake-async-test
+  // #enddocregion tests
+
+  // #docregion done-test
+  it('should show quote after getQuote promise (done)', (done: any) => {
+    fixture.detectChanges();
+
+    // get the spy promise and wait for it to resolve
+    spy.calls.mostRecent().returnValue.then(() => {
+      fixture.detectChanges(); // update view with quote
+      expect(el.textContent).toBe(testQuote);
+      done();
+    });
+  });
+  // #enddocregion done-test
+});
@@ -0,0 +1,116 @@
+// #docplaster
+// When AppComponent learns to present quote with intervalTimer
+import { async, discardPeriodicTasks, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+import { By }                        from '@angular/platform-browser';
+import { DebugElement }              from '@angular/core';
+
+import { TwainService }   from './model';
+import { TwainComponent } from './twain.component';
+
+xdescribe('TwainComponent', () => {
+
+  let comp: TwainComponent;
+  let fixture: ComponentFixture<TwainComponent>;
+
+  const quotes = [
+  'Test Quote 1',
+  'Test Quote 2',
+  'Test Quote 3'
+  ];
+
+  let spy: jasmine.Spy;
+  let twainEl: DebugElement;  // the element with the Twain quote
+  let twainService: TwainService; // the actually injected service
+
+  function getQuote() { return twainEl.nativeElement.textContent; }
+
+  // #docregion setup
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+       declarations: [ TwainComponent ],
+       providers:    [ TwainService ],
+    });
+
+    fixture = TestBed.createComponent(TwainComponent);
+    comp    = fixture.componentInstance;
+
+    // TwainService actually injected into the component
+    twainService = fixture.debugElement.injector.get(TwainService);
+
+    // Setup spy on the `getQuote` method
+    spy = spyOn(twainService, 'getQuote')
+          .and.returnValues(...quotes.map(q => Promise.resolve(q)));
+
+    // Get the Twain quote element by CSS selector (e.g., by class name)
+    twainEl = fixture.debugElement.query(By.css('.twain'));
+  });
+
+  afterEach(() => {
+    // destroy component to stop the component timer
+    fixture.destroy();
+  });
+  // #enddocregion setup
+
+  // #docregion tests
+  it('should not show quote before OnInit', () => {
+    expect(getQuote()).toBe('');
+  });
+
+  it('should still not show quote after component initialized', () => {
+    // because the getQuote service is async
+    fixture.detectChanges(); // trigger data binding
+    expect(getQuote()).toContain('not initialized');
+  });
+
+  // WIP
+  // If go this way, add jasmine.clock().uninstall(); to afterEach
+  // it('should show quote after Angular "settles"', async(() => {
+  //   //jasmine.clock().install();
+  //   fixture.detectChanges(); // trigger data binding
+  //  fixture.whenStable().then(() => {
+  //     fixture.detectChanges(); // update view with the quote
+  //     expect(getQuote()).toBe(quotes[0]);
+  //   });
+  //   // jasmine.clock().tick(5000);
+  //   // fixture.whenStable().then(() => {
+  //   //   fixture.detectChanges(); // update view with the quote
+  //   //   expect(getQuote()).toBe(quotes[1]);
+  //   // });
+  // }));
+
+  it('should show quote after getQuote promise returns', fakeAsync(() => {
+    fixture.detectChanges(); // trigger data binding
+    tick();                  // wait for first async getQuote to return
+    fixture.detectChanges(); // update view with the quote
+    expect(getQuote()).toBe(quotes[0]);
+
+    // destroy component to stop the component timer before test ends
+    // else test errors because still have timer in the queue
+    fixture.destroy();
+  }));
+
+  it('should show 2nd quote after 5 seconds pass', fakeAsync(() => {
+    fixture.detectChanges(); // trigger data binding
+    tick(5000);              // wait for second async getQuote to return
+    fixture.detectChanges(); // update view with the quote
+    expect(getQuote()).toBe(quotes[1]);
+
+    // still have intervalTimer queuing requres
+    // discardPeriodicTasks() else test errors
+    discardPeriodicTasks();
+  }));
+
+  fit('should show 3rd quote after 10 seconds pass', fakeAsync(() => {
+    fixture.detectChanges(); // trigger data binding
+    tick(5000);              // wait for second async getQuote to return
+    fixture.detectChanges(); // update view with the 2nd quote
+    tick(5000);              // wait for third async getQuote to return
+    fixture.detectChanges(); // update view with the 3rd quote
+    expect(getQuote()).toBe(quotes[2]);
+
+    // still have intervalTimer queuing requres
+    // discardPeriodicTasks() else test errors
+    discardPeriodicTasks();
+  }));
+  // #enddocregion tests
+});
@@ -0,0 +1,27 @@
+// #docregion
+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+import { TwainService } from './twain.service';
+
+@Component({
+  selector: 'twain-quote',
+  template: '<p class="twain"><i>{{quote}}</i></p>'
+})
+export class TwainComponent  implements OnInit, OnDestroy {
+  intervalId: number;
+  quote = '-- not initialized yet --';
+  constructor(private twainService: TwainService) { }
+
+  getQuote() {
+    this.twainService.getQuote().then(quote => this.quote = quote);
+  }
+
+  ngOnInit(): void {
+    this.getQuote();
+    this.intervalId = window.setInterval(() => this.getQuote(), 5000);
+  }
+
+  ngOnDestroy(): void {
+    clearInterval(this.intervalId);
+  }
+}
@@ -0,0 +1,20 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { TwainService } from './twain.service';
+
+// #docregion component
+@Component({
+  selector: 'twain-quote',
+  template: '<p class="twain"><i>{{quote}}</i></p>'
+})
+export class TwainComponent  implements OnInit {
+  intervalId: number;
+  quote = '...';
+  constructor(private twainService: TwainService) { }
+
+  ngOnInit(): void {
+    this.twainService.getQuote().then(quote => this.quote = quote);
+  }
+}
+// #enddocregion component
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+
+const quotes = [
+'Always do right. This will gratify some people and astonish the rest.',
+'I have never let my schooling interfere with my education.',
+'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.',
+'Whenever you find yourself on the side of the majority, it is time to pause and reflect.',
+'If you tell the truth, you don\'t have to remember anything.',
+'Clothes make the man. Naked people have little or no influence on society.',
+'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.',
+'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.',
+'The man who does not read good books has no advantage over the man who cannot read them.',
+'Get your facts first, and then you can distort them as much as you please.',
+];
+
+@Injectable()
+export class TwainService {
+  private next = 0;
+
+  // Imaginary todo: get quotes from a remote quote service
+  // returns quote after delay simulating server latency
+  getQuote(): Promise<string> {
+    return new Promise(resolve => {
+      setTimeout( () => resolve(this.nextQuote()), 500 );
+    });
+  }
+
+  private nextQuote() {
+    if (this.next === quotes.length) { this.next = 0; }
+    return quotes[ this.next++ ];
+  }
+}
@@ -1,4 +0,0 @@
-export class Quote {
-  id: number;
-  quote: string;
-}
@@ -1,93 +0,0 @@
-// #docplaster
-import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
-
-// #docregion import-marbles
-import { cold, getTestScheduler } from 'jasmine-marbles';
-// #enddocregion import-marbles
-
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-
-import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
-import { last } from 'rxjs/operators';
-
-import { TwainService }   from './twain.service';
-import { TwainComponent } from './twain.component';
-
-
-describe('TwainComponent (marbles)', () => {
-  let component: TwainComponent;
-  let fixture: ComponentFixture<TwainComponent>;
-  let getQuoteSpy: jasmine.Spy;
-  let quoteEl: HTMLElement;
-  let testQuote: string;
-
-  // Helper function to get the error message element value
-  // An *ngIf keeps it out of the DOM until there is an error
-  const errorMessage = () => {
-    const el = fixture.nativeElement.querySelector('.error');
-    return el ? el.textContent : null;
-  };
-
-  beforeEach(() => {
-    // Create a fake TwainService object with a `getQuote()` spy
-    const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
-    getQuoteSpy = twainService.getQuote;
-
-    TestBed.configureTestingModule({
-      declarations: [ TwainComponent ],
-      providers:    [
-        { provide: TwainService, useValue: twainService }
-      ]
-    });
-
-    fixture = TestBed.createComponent(TwainComponent);
-    component = fixture.componentInstance;
-    quoteEl = fixture.nativeElement.querySelector('.twain');
-    testQuote = 'Test Quote';
-  });
-
-  // A synchronous test that simulates async behavior
-  // #docregion get-quote-test
-  it('should show quote after getQuote (marbles)', () => {
-    // observable test quote value and complete(), after delay
-    // #docregion test-quote-marbles
-    const q$ = cold('---x|', { x: testQuote });
-    // #enddocregion test-quote-marbles
-    getQuoteSpy.and.returnValue( q$ );
-
-    fixture.detectChanges(); // ngOnInit()
-    expect(quoteEl.textContent).toBe('...', 'should show placeholder');
-
-    // #docregion test-scheduler-flush
-    getTestScheduler().flush(); // flush the observables
-    // #enddocregion test-scheduler-flush
-
-    fixture.detectChanges(); // update view
-
-    expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
-    expect(errorMessage()).toBeNull('should not show error');
-  });
-  // #enddocregion get-quote-test
-
-  // Still need fakeAsync() because of component's setTimeout()
-  // #docregion error-test
-  it('should display error when TwainService fails', fakeAsync(() => {
-    // observable error after delay
-    // #docregion error-marbles
-    const q$ = cold('---#|', null, new Error('TwainService test failure'));
-    // #enddocregion error-marbles
-    getQuoteSpy.and.returnValue( q$ );
-
-    fixture.detectChanges(); // ngOnInit()
-    expect(quoteEl.textContent).toBe('...', 'should show placeholder');
-
-    getTestScheduler().flush(); // flush the observables
-    tick();                     // component shows error after a setTimeout()
-    fixture.detectChanges();    // update error message
-
-    expect(errorMessage()).toMatch(/test failure/, 'should display error');
-    expect(quoteEl.textContent).toBe('...', 'should show placeholder');
-  }));
-  // #enddocregion error-test
-});
@@ -1,184 +0,0 @@
-// #docplaster
-import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing';
-
-import { asyncData, asyncError }  from '../../testing';
-
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-
-import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
-import { last } from 'rxjs/operators';
-
-import { TwainService }   from './twain.service';
-import { TwainComponent } from './twain.component';
-
-describe('TwainComponent', () => {
-  let component: TwainComponent;
-  let fixture: ComponentFixture<TwainComponent>;
-  let getQuoteSpy: jasmine.Spy;
-  let quoteEl: HTMLElement;
-  let testQuote: string;
-
-  // Helper function to get the error message element value
-  // An *ngIf keeps it out of the DOM until there is an error
-  const errorMessage = () => {
-    const el = fixture.nativeElement.querySelector('.error');
-    return el ? el.textContent : null;
-  };
-
-  // #docregion setup
-  beforeEach(() => {
-    testQuote = 'Test Quote';
-
-    // #docregion spy
-    // Create a fake TwainService object with a `getQuote()` spy
-    const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
-    // Make the spy return a synchronous Observable with the test data
-    getQuoteSpy = twainService.getQuote.and.returnValue( of(testQuote) );
-    // #enddocregion spy
-
-    TestBed.configureTestingModule({
-      declarations: [ TwainComponent ],
-      providers:    [
-        { provide: TwainService, useValue: twainService }
-      ]
-    });
-
-    fixture = TestBed.createComponent(TwainComponent);
-    component = fixture.componentInstance;
-    quoteEl = fixture.nativeElement.querySelector('.twain');
-  });
-  // #enddocregion setup
-
-  describe('when test with synchronous observable', () => {
-    it('should not show quote before OnInit', () => {
-      expect(quoteEl.textContent).toBe('', 'nothing displayed');
-      expect(errorMessage()).toBeNull('should not show error element');
-      expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
-    });
-
-    // The quote would not be immediately available if the service were truly async.
-    // #docregion sync-test
-    it('should show quote after component initialized', () => {
-      fixture.detectChanges(); // onInit()
-
-      // sync spy result shows testQuote immediately after init
-      expect(quoteEl.textContent).toBe(testQuote);
-      expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
-    });
-    // #enddocregion sync-test
-
-
-    // The error would not be immediately available if the service were truly async.
-    // Use `fakeAsync` because the component error calls `setTimeout`
-    // #docregion error-test
-    it('should display error when TwainService fails', fakeAsync(() => {
-      // tell spy to return an error observable
-      getQuoteSpy.and.returnValue(
-        new ErrorObservable('TwainService test failure'));
-
-      fixture.detectChanges(); // onInit()
-      // sync spy errors immediately after init
-
-      tick(); // flush the component's setTimeout()
-
-      fixture.detectChanges(); // update errorMessage within setTimeout()
-
-      expect(errorMessage()).toMatch(/test failure/, 'should display error');
-      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
-    }));
-    // #enddocregion error-test
-  });
-
-  describe('when test with asynchronous observable', () => {
-    beforeEach(() => {
-      // #docregion async-setup
-      // Simulate delayed observable values with the `asyncData()` helper
-      getQuoteSpy.and.returnValue(asyncData(testQuote));
-      // #enddocregion async-setup
-    });
-
-    it('should not show quote before OnInit', () => {
-      expect(quoteEl.textContent).toBe('', 'nothing displayed');
-      expect(errorMessage()).toBeNull('should not show error element');
-      expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
-    });
-
-    it('should still not show quote after component initialized', () => {
-      fixture.detectChanges();
-      // getQuote service is async => still has not returned with quote
-      // so should show the start value, '...'
-      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
-      expect(errorMessage()).toBeNull('should not show error');
-      expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
-    });
-
-    // #docregion fake-async-test
-    it('should show quote after getQuote (fakeAsync)', fakeAsync(() => {
-      fixture.detectChanges(); // ngOnInit()
-      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
-
-      tick(); // flush the observable to get the quote
-      fixture.detectChanges(); // update view
-
-      expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
-      expect(errorMessage()).toBeNull('should not show error');
-    }));
-    // #enddocregion fake-async-test
-
-    // #docregion async-test
-    it('should show quote after getQuote (async)', async(() => {
-      fixture.detectChanges(); // ngOnInit()
-      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
-
-      fixture.whenStable().then(() => { // wait for async getQuote
-        fixture.detectChanges();        // update view with quote
-        expect(quoteEl.textContent).toBe(testQuote);
-        expect(errorMessage()).toBeNull('should not show error');
-      });
-    }));
-    // #enddocregion async-test
-
-
-    // #docregion quote-done-test
-    it('should show last quote (quote done)', (done: DoneFn) => {
-      fixture.detectChanges();
-
-      component.quote.pipe( last() ).subscribe(() => {
-        fixture.detectChanges(); // update view with quote
-        expect(quoteEl.textContent).toBe(testQuote);
-        expect(errorMessage()).toBeNull('should not show error');
-        done();
-      });
-    });
-    // #enddocregion quote-done-test
-
-    // #docregion spy-done-test
-    it('should show quote after getQuote (spy done)', (done: DoneFn) => {
-      fixture.detectChanges();
-
-      // the spy's most recent call returns the observable with the test quote
-      getQuoteSpy.calls.mostRecent().returnValue.subscribe(() => {
-        fixture.detectChanges(); // update view with quote
-        expect(quoteEl.textContent).toBe(testQuote);
-        expect(errorMessage()).toBeNull('should not show error');
-        done();
-      });
-    });
-    // #enddocregion spy-done-test
-
-    // #docregion async-error-test
-    it('should display error when TwainService fails', fakeAsync(() => {
-      // tell spy to return an async error observable
-      getQuoteSpy.and.returnValue(asyncError<string>('TwainService test failure'));
-
-      fixture.detectChanges();
-      tick();                  // component shows error after a setTimeout()
-      fixture.detectChanges(); // update error message
-
-      expect(errorMessage()).toMatch(/test failure/, 'should display error');
-      expect(quoteEl.textContent).toBe('...', 'should show placeholder');
-    }));
-    // #enddocregion async-error-test
-  });
-});
@@ -1,49 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-import { catchError, startWith } from 'rxjs/operators';
-
-import { TwainService } from './twain.service';
-
-// #docregion component
-@Component({
-  selector: 'twain-quote',
-  // #docregion template
-  template: `
-    <p class="twain"><i>{{quote | async}}</i></p>
-    <button (click)="getQuote()">Next quote</button>
-    <p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>`,
-  // #enddocregion template
-  styles: [
-    `.twain { font-style: italic; } .error { color: red; }`
-  ]
-
-})
-export class TwainComponent implements OnInit {
-  errorMessage: string;
-  quote: Observable<string>;
-
-  constructor(private twainService: TwainService) {}
-
-  ngOnInit(): void {
-    this.getQuote();
-  }
-
-  // #docregion get-quote
-  getQuote() {
-    this.errorMessage = '';
-    this.quote = this.twainService.getQuote().pipe(
-      startWith('...'),
-      catchError( (err: any) => {
-        // Wait a turn because errorMessage already set once this turn
-        setTimeout(() => this.errorMessage = err.message || err.toString());
-        return of('...'); // reset message to placeholder
-      })
-    );
-    // #enddocregion get-quote
-  }
-
-}
-// #enddocregion component
@@ -1,15 +0,0 @@
-import { Quote } from './quote';
-
-export const QUOTES: Quote[] = [
-  'Always do right. This will gratify some people and astonish the rest.',
-  'I have never let my schooling interfere with my education.',
-  'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.',
-  'Whenever you find yourself on the side of the majority, it is time to pause and reflect.',
-  'If you tell the truth, you don\'t have to remember anything.',
-  'Clothes make the man. Naked people have little or no influence on society.',
-  'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.',
-  'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.',
-  'The man who does not read good books has no advantage over the man who cannot read them.',
-  'Get your facts first, and then you can distort them as much as you please.',
-]
-.map((q, i) => ({ id: i + 1, quote: q }));
@@ -1,47 +0,0 @@
-// Mark Twain Quote service gets quotes from server
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-
-import { Observable } from 'rxjs/Observable';
-import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
-import { of } from 'rxjs/observable/of';
-import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators';
-
-import { Quote } from './quote';
-
-@Injectable()
-export class TwainService {
-  constructor(private http: HttpClient) { }
-
-  private nextId = 1;
-
-  getQuote(): Observable<string> {
-    return Observable.create(observer => observer.next(this.nextId++)).pipe(
-
-      // tap((id: number) => console.log(id)),
-      // tap((id: number) => { throw new Error('Simulated server error'); }),
-
-      switchMap((id: number) => this.http.get<Quote>(`api/quotes/${id}`)),
-      // tap((q : Quote) => console.log(q)),
-      map((q: Quote) => q.quote),
-
-      // `errors` is observable of http.get errors
-      retryWhen(errors => errors.pipe(
-        switchMap((error: HttpErrorResponse)  => {
-          if (error.status === 404) {
-            // Queried for quote that doesn't exist.
-            this.nextId = 1; // retry with quote id:1
-            return of(null); // signal OK to retry
-          }
-          // Some other HTTP error.
-          console.error(error);
-          return new ErrorObservable('Cannot get Twain quotes from the server');
-        }),
-        take(2),
-        // If a second retry value, then didn't find id:1 and triggers the following error
-        concat(new ErrorObservable('There are no Twain quotes')) // didn't find id:1
-      ))
-    );
-  }
-}
-
@@ -1,66 +1,26 @@
 // #docplaster
 import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { By }                                from '@angular/platform-browser';
+import { DebugElement }                      from '@angular/core';

-import { UserService }      from '../model/user.service';
+import { UserService }      from './model';
 import { WelcomeComponent } from './welcome.component';

-// #docregion mock-user-service
-class MockUserService {
-  isLoggedIn = true;
-  user = { name: 'Test User'};
-};
-// #enddocregion mock-user-service
-
-describe('WelcomeComponent (class only)', () => {
-  let comp: WelcomeComponent;
-  let userService: UserService;
-
-  // #docregion class-only-before-each
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      // provide the component-under-test and dependent service
-      providers: [
-        WelcomeComponent,
-        { provide: UserService, useClass: MockUserService }
-      ]
-    });
-    // inject both the component and the dependent service.
-    comp = TestBed.get(WelcomeComponent);
-    userService = TestBed.get(UserService);
-  });
-  // #enddocregion class-only-before-each
-
-  // #docregion class-only-tests
-  it('should not have welcome message after construction', () => {
-    expect(comp.welcome).toBeUndefined();
-  });
-
-  it('should welcome logged in user after Angular calls ngOnInit', () => {
-    comp.ngOnInit();
-    expect(comp.welcome).toContain(userService.user.name);
-  });
-
-  it('should ask user to log in if not logged in after ngOnInit', () => {
-    userService.isLoggedIn = false;
-    comp.ngOnInit();
-    expect(comp.welcome).not.toContain(userService.user.name);
-    expect(comp.welcome).toContain('log in');
-  });
-  // #enddocregion class-only-tests
-});
-
 describe('WelcomeComponent', () => {

  let comp: WelcomeComponent;
  let fixture: ComponentFixture<WelcomeComponent>;
  let componentUserService: UserService; // the actually injected service
  let userService: UserService; // the TestBed injected service
+  let de: DebugElement;  // the DebugElement with the welcome message
  let el: HTMLElement; // the DOM element with the welcome message

-  // #docregion setup, user-service-stub
-    let userServiceStub: Partial<UserService>;
+  let userServiceStub: {
+    isLoggedIn: boolean;
+    user: { name: string}
+  };

-  // #enddocregion user-service-stub
+  // #docregion setup
  beforeEach(() => {
    // stub UserService for test purposes
    // #docregion user-service-stub
@@ -97,7 +57,8 @@ describe('WelcomeComponent', () => {
    // #enddocregion inject-from-testbed

    //  get the "welcome" element by CSS selector (e.g., by class name)
-    el = fixture.nativeElement.querySelector('.welcome');
+    de = fixture.debugElement.query(By.css('.welcome'));
+    el = de.nativeElement;
  });
  // #enddocregion setup

@@ -124,10 +85,12 @@ describe('WelcomeComponent', () => {
  });
  // #enddocregion tests

+  // #docregion inject-it
  it('should inject the component\'s UserService instance',
    inject([UserService], (service: UserService) => {
    expect(service).toBe(componentUserService);
  }));
+  // #enddocregion inject-it

  it('TestBed and Component UserService should be the same', () => {
    expect(userService === componentUserService).toBe(true);
@@ -1,20 +1,19 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import { UserService }       from '../model/user.service';

-// #docregion component
+import { UserService }       from './model/user.service';
+
@Component({
  selector: 'app-welcome',
-  template: '<h3 class="welcome"><i>{{welcome}}</i></h3>'
+  template: '<h3 class="welcome" ><i>{{welcome}}</i></h3>'
 })
-// #docregion class
 export class WelcomeComponent  implements OnInit {
-  welcome: string;
+  welcome = '-- not initialized yet --';
  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.welcome = this.userService.isLoggedIn ?
-      'Welcome, ' + this.userService.user.name : 'Please log in.';
+      'Welcome, ' + this.userService.user.name :
+      'Please log in.';
  }
 }
-// #enddocregion component, class
@@ -0,0 +1,26 @@
+<!-- Run the bag source as an app -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Specs Bag</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app/bag/bag-main').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <bag-comp>Loading ...</bag-comp>
+  </body>
+</html>
@@ -1,29 +0,0 @@
-// export for convenience.
-export { ActivatedRoute } from '@angular/router';
-
-// #docregion activated-route-stub
-import { ReplaySubject } from 'rxjs/ReplaySubject';
-import { convertToParamMap, ParamMap, Params } from '@angular/router';
-
-/**
- * An ActivateRoute test double with a `paramMap` observable.
- * Use the `setParamMap()` method to add the next `paramMap` value.
- */
-export class ActivatedRouteStub {
-  // Use a ReplaySubject to share previous values with subscribers
-  // and pump new values into the `paramMap` observable
-  private subject = new ReplaySubject<ParamMap>();
-
-  constructor(initialParams?: Params) {
-    this.setParamMap(initialParams);
-  }
-
-  /** The mock paramMap observable */
-  readonly paramMap = this.subject.asObservable();
-
-  /** Set the paramMap observables's next value */
-  setParamMap(params?: Params) {
-    this.subject.next(convertToParamMap(params));
-  };
-}
-// #enddocregion activated-route-stub
@@ -1,30 +0,0 @@
-/*
-* Mock async observables that return asynchronously.
-* The observable either emits once and completes or errors.
-*
-* Must call `tick()` when test with `fakeAsync()`.
-*
-* THE FOLLOWING DON'T WORK
-* Using `of().delay()` triggers TestBed errors;
-* see https://github.com/angular/angular/issues/10127 .
-*
-* Using `asap` scheduler - as in `of(value, asap)` - doesn't work either.
-*/
-import { Observable } from 'rxjs/Observable';
-import { defer } from 'rxjs/observable/defer';
-
-// #docregion async-data
-/** Create async observable that emits-once and completes
- *  after a JS engine turn */
-export function asyncData<T>(data: T) {
-  return defer(() => Promise.resolve(data));
-}
-// #enddocregion async-data
-
-// #docregion async-error
-/** Create async observable error that errors
- *  after a JS engine turn */
-export function asyncError<T>(errorObject: any) {
-  return defer(() => Promise.reject(errorObject));
-}
-// #enddocregion async-error
@@ -1,10 +1,8 @@
 import { DebugElement }           from '@angular/core';
 import { tick, ComponentFixture } from '@angular/core/testing';

-export * from './async-observable-helpers';
-export * from './activated-route-stub';
 export * from './jasmine-matchers';
-export * from './router-link-directive-stub';
+export * from './router-stubs';

 ///// Short utilities /////

@@ -1,30 +0,0 @@
-import { Directive, Input } from '@angular/core';
-
-// export for convenience.
-export { RouterLink} from '@angular/router';
-
-/* tslint:disable:directive-class-suffix */
-// #docregion router-link
-@Directive({
-  selector: '[routerLink]',
-  host: { '(click)': 'onClick()' }
-})
-export class RouterLinkDirectiveStub {
-  @Input('routerLink') linkParams: any;
-  navigatedTo: any = null;
-
-  onClick() {
-    this.navigatedTo = this.linkParams;
-  }
-}
-// #enddocregion router-link
-
-/// Dummy module to satisfy Angular Language service. Never used.
-import { NgModule } from '@angular/core';
-
-@NgModule({
-  declarations: [
-    RouterLinkDirectiveStub
-  ]
-})
-export class RouterStubsModule {}
@@ -0,0 +1,58 @@
+ // export for convenience.
+export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router';
+
+import { Component, Directive, Injectable, Input } from '@angular/core';
+import { NavigationExtras } from '@angular/router';
+
+// #docregion router-link
+@Directive({
+  selector: '[routerLink]',
+  host: {
+    '(click)': 'onClick()'
+  }
+})
+export class RouterLinkStubDirective {
+  @Input('routerLink') linkParams: any;
+  navigatedTo: any = null;
+
+  onClick() {
+    this.navigatedTo = this.linkParams;
+  }
+}
+// #enddocregion router-link
+
+@Component({selector: 'router-outlet', template: ''})
+export class RouterOutletStubComponent { }
+
+@Injectable()
+export class RouterStub {
+  navigate(commands: any[], extras?: NavigationExtras) { }
+}
+
+
+// Only implements params and part of snapshot.paramMap
+// #docregion activated-route-stub
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { convertToParamMap, ParamMap } from '@angular/router';
+
+@Injectable()
+export class ActivatedRouteStub {
+
+  // ActivatedRoute.paramMap is Observable
+  private subject = new BehaviorSubject(convertToParamMap(this.testParamMap));
+  paramMap = this.subject.asObservable();
+
+  // Test parameters
+  private _testParamMap: ParamMap;
+  get testParamMap() { return this._testParamMap; }
+  set testParamMap(params: {}) {
+    this._testParamMap = convertToParamMap(params);
+    this.subject.next(this._testParamMap);
+  }
+
+  // ActivatedRoute.snapshot.paramMap
+  get snapshot() {
+    return { paramMap: this.testParamMap };
+  }
+}
+// #enddocregion activated-route-stub
--- a/Show More
+++ b/Show More