From 3d12ab7d35372ea36eda6cd2a3e54ce936323240 Mon Sep 17 00:00:00 2001
From: YuCheng Hu <yucheng.hu@insight.com>
Date: Sat, 3 Apr 2021 09:50:33 -0400
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/movie-list.component.css          |   6 -
 .../src/app/movie-list.component.html         |   2 -
 .../src/app/movie-list.component.ts           |   2 -
 .../animations/src/app/app.component.1.ts     |  19 +--
 .../app/hero-list-enter-leave.component.ts    |   2 -
 .../src/app/hero-list-page.component.css      |   3 +-
 .../src/app/open-close.component.3.ts         |  22 +--
 .../src/app/open-close.component.html         |   3 -
 .../src/app/open-close.component.ts           |  11 +-
 .../architecture/src/app/app.component.ts     |   2 -
 .../architecture/src/app/app.module.ts        |   2 -
 .../examples/architecture/src/app/mini-app.ts |   4 -
 .../src/app/app.component.html                |   6 +-
 .../attribute-binding/src/app/app.module.ts   |   6 +-
 .../src/app/app.component.1.html              |   4 -
 .../src/app/highlight.directive.2.ts          |  27 +--
 .../src/app/highlight.directive.3.ts          |   8 +-
 .../src/app/highlight.directive.ts            |   2 -
 .../bootstrapping/src/app/app.module.ts       |   4 -
 .../src/app/app.component.css                 |   2 +-
 .../src/app/app.component.html                |  12 +-
 .../src/app/app.component.ts                  |   6 +
 .../src/app/item-switch.component.ts          |   4 +
 .../src/app/hero-details.component.ts         |   3 -
 .../src/app/quest-summary.component.ts        |   2 -
 .../src/app/app.component.ts                  |   8 -
 .../src/app/date-logger.service.ts            |   2 -
 .../src/app/hero-bios.component.ts            |   4 -
 .../src/app/hero-contact.component.ts         |   2 -
 .../src/app/hero-of-the-month.component.ts    |   2 -
 .../src/app/parent-finder.component.ts        |   8 +-
 .../src/app/runners-up.ts                     |   2 -
 .../src/app/sorted-heroes.component.ts        |   6 +-
 .../src/app/storage.service.ts                |   5 -
 .../src/app/user-context.service.ts           |  10 --
 .../src/app/app.component.2.ts                |   5 -
 .../src/app/app.component.ts                  |   6 -
 .../src/app/app.module.ts                     |   7 +-
 .../src/app/car/car-creations.ts              |  11 --
 .../src/app/car/car-injector.ts               |   7 -
 .../src/app/car/car-no-di.ts                  |   4 -
 .../dependency-injection/src/app/car/car.ts   |   2 -
 .../src/app/heroes/hero-list.component.1.ts   |   3 -
 .../src/app/heroes/hero-list.component.2.ts   |   2 -
 .../src/app/heroes/hero.service.2.ts          |   3 -
 .../src/app/heroes/hero.service.3.ts          |   2 +-
 .../src/app/heroes/heroes.component.1.ts      |   6 -
 .../src/app/injector.component.ts             |   2 -
 .../src/app/providers.component.ts            |  14 +-
 .../src/app/test.component.ts                 |   2 -
 .../examples/dependency-injection/src/main.ts |   2 -
 .../src/app/app-ctor.component.1.ts           |   1 -
 .../src/app/app.component.1.ts                |   3 -
 .../src/app/app.component.2.ts                |   6 -
 .../src/app/app.component.3.ts                |   8 -
 .../displaying-data/src/app/app.component.ts  |   4 -
 .../examples/displaying-data/src/app/hero.ts  |   4 -
 .../examples/displaying-data/src/index.html   |   3 -
 .../src/app/app.component.html                |   4 -
 .../src/app/app.module.ts                     |   3 -
 .../event-binding/src/app/app.component.html  |   8 +-
 .../event-binding/src/app/app.component.ts    |   9 +-
 .../customer-dashboard.module.ts              |   8 -
 .../hero-form-reactive.component.2.ts         |   4 -
 .../reactive/hero-form-reactive.component.css |   2 -
 .../src/app/shared/alter-ego.directive.ts     |   2 -
 .../app/shared/forbidden-name.directive.ts    |   6 +-
 .../app/shared/identity-revealed.directive.ts |   2 +-
 .../hero-form-template.component.html         |   2 -
 .../template/hero-form-template.component.ts  |   4 -
 .../app/hero-form/hero-form.component.html    |  10 --
 .../src/app/hero-form/hero-form.component.ts  |   2 -
 aio/content/examples/forms/src/index.html     |   2 -
 .../src/app/app.component.css                 |   4 +-
 .../src/app/app.component.ts                  |   5 +-
 .../getting-started-v0/src/app/app.module.ts  |   4 +-
 .../getting-started-v0/src/app/products.ts    |   3 +
 .../src/app/top-bar/top-bar.component.ts      |   9 +-
 .../examples/getting-started-v0/src/main.ts   |   5 +-
 .../getting-started/src/app/cart.service.1.ts |   3 -
 .../getting-started/src/app/cart.service.ts   |   7 +-
 .../src/app/cart/cart.component.1.ts          |   7 +-
 .../src/app/cart/cart.component.2.ts          |   4 +-
 .../src/app/cart/cart.component.3.ts          |   6 +-
 .../src/app/cart/cart.component.html          |   2 +-
 .../src/app/cart/cart.component.ts            |  38 ++---
 .../product-details.component.1.ts            |  14 +-
 .../product-details.component.ts              |  24 ++-
 .../product-list.component.5.html             |   2 -
 .../product-list/product-list.component.html  |  14 +-
 .../getting-started/src/app/products.ts       |   3 +
 .../src/app/shipping/shipping.component.1.ts  |   7 +-
 .../src/app/shipping/shipping.component.ts    |  17 +-
 .../examples/http/e2e/src/app.e2e-spec.ts     |  21 +++
 .../http/src/app/config/config.component.html |   1 +
 .../http/src/app/config/config.component.ts   |  17 +-
 .../http/src/app/config/config.service.ts     |   1 +
 .../http/src/app/heroes/heroes.component.css  |   3 +-
 .../http/src/app/heroes/heroes.component.html |   6 -
 .../http/src/app/http-interceptors/index.ts   |   5 +
 .../package-search.component.html             |   2 +-
 .../package-search.component.ts               |   5 +
 .../http/src/app/request-cache.service.ts     |   2 -
 .../examples/http/src/assets/config.json      |   3 +-
 aio/content/examples/http/src/main-specs.ts   |   2 +-
 .../i18n/doc-files/app.locale_data.ts         |   2 -
 .../i18n/doc-files/app.locale_data_extra.ts   |   4 +-
 .../examples/i18n/src/app/app.component.html  |   2 -
 .../src/app/aliasing/aliasing.component.ts    |   4 -
 .../in-the-metadata.component.ts              |   4 +-
 .../input-output/input-output.component.ts    |   6 -
 .../app/item-output/item-output.component.ts  |   2 -
 .../interpolation/e2e/src/app.e2e-spec.ts     |   2 +-
 .../interpolation/src/app/app.component.css   |   8 +
 .../interpolation/src/app/app.component.ts    |   4 +-
 .../src/app/app-routing.module.ts             |   2 -
 .../src/app/orders/orders-routing.module.ts   |   2 -
 .../src/app/after-content.component.ts        |  49 +-----
 .../src/app/after-view.component.ts           |  44 +----
 .../src/app/app.component.html                |   2 +-
 .../lifecycle-hooks/src/app/app.module.ts     |  34 ++--
 .../src/app/counter.component.ts              |  45 -----
 .../src/app/do-check-parent.component.html    |   4 +-
 .../src/app/do-check.component.ts             |  26 +--
 .../src/app/on-changes.component.ts           |  33 +---
 .../src/app/peek-a-boo.component.ts           |  22 +--
 .../lifecycle-hooks/src/app/spy.directive.ts  |  13 +-
 .../ngcontainer/src/app/app.component.css     |   3 -
 .../ngcontainer/src/app/app.component.html    |  40 +----
 .../ngcontainer/src/app/content.component.ts  |   3 -
 .../examples/pipes/src/app/app.component.html |   2 -
 .../examples/pipes/src/app/fetch-json.pipe.ts |   3 -
 .../app/flying-heroes-impure.component.html   |   8 -
 .../src/app/flying-heroes.component.html      |   2 -
 .../pipes/src/app/flying-heroes.component.ts  |   6 -
 .../pipes/src/app/flying-heroes.pipe.ts       |   4 +-
 .../pipes/src/app/hero-birthday1.component.ts |   3 -
 aio/content/examples/pipes/src/app/heroes.ts  |   4 +-
 .../src/app/app.component.html                |   6 -
 .../reactive-forms/src/app/app.component.html |   7 -
 .../profile-editor.component.1.html           |   2 -
 .../profile-editor.component.css              |   2 +-
 .../profile-editor.component.html             |   5 -
 .../profile-editor.component.ts               |  17 +-
 .../router-tutorial/src/app/app.component.css |  20 +--
 .../src/app/admin/admin-routing.module.3.ts   |   1 -
 .../router/src/app/app-routing.module.5.ts    |   2 -
 .../router/src/app/app-routing.module.ts      |   2 +-
 .../router/src/app/app.component.3.ts         |   4 -
 .../examples/router/src/app/app.module.1.ts   |   2 -
 .../examples/router/src/app/app.module.2.ts   |   5 -
 .../examples/router/src/app/app.module.3.ts   |  13 --
 .../examples/router/src/app/app.module.ts     |   2 -
 .../router/src/app/auth/auth.guard.2.ts       |   6 -
 .../router/src/app/auth/auth.guard.ts         |   1 -
 .../router/src/app/auth/auth.module.ts        |   7 -
 .../crisis-center-routing.module.2.ts         |  17 --
 .../crisis-center-routing.module.3.ts         |   4 -
 .../crisis-detail.component.1.ts              |   4 -
 .../crisis-list/crisis-list.component.css     |   5 +-
 .../crisis-list/crisis-list.component.html    |  20 +--
 .../crisis-list/crisis-list.component.ts      |   3 -
 .../hero-detail/hero-detail.component.1.ts    |   6 -
 .../hero-detail/hero-detail.component.3.ts    |   6 -
 .../hero-list/hero-list.component.1.html      |   2 -
 .../heroes/hero-list/hero-list.component.1.ts |   5 -
 .../heroes/hero-list/hero-list.component.css  |   5 +-
 .../router/src/app/heroes/heroes.module.ts    |   9 -
 .../my-lib/schematics/my-service/index.ts     |  50 ++++--
 .../src/app/app.module.ts                     |   4 -
 aio/content/examples/setup/src/index.html     |   3 -
 .../src/app/app.component.css                 |   2 -
 .../src/app/app.component.html                |  26 +--
 .../src/app/app.component.ts                  |   6 +-
 .../styleguide/src/04-10/app/app.module.ts    |   8 -
 .../styleguide/src/04-11/app/app.module.ts    |   8 -
 .../app/core/spinner/spinner.component.css    |   6 +-
 .../styleguide/src/04-12/app/app.module.ts    |   8 -
 .../src/app/app.component.html                |  14 --
 .../src/app/app.component.html                |   4 -
 .../template-syntax/src/app/app.component.css |   2 +-
 .../src/app/app.component.html                | 160 +-----------------
 .../template-syntax/src/app/app.component.ts  |  11 --
 .../src/app/click.directive.ts                |   7 -
 .../src/app/hero-detail.component.ts          |  15 --
 .../banner/banner-initial.component.spec.ts   |  10 +-
 .../banner.component.detect-changes.spec.ts   |   2 -
 .../src/app/dashboard/dashboard.component.css |   4 +-
 .../app/dashboard/dashboard.component.spec.ts |   2 -
 .../testing/src/app/demo/async-helper.spec.ts |  16 +-
 .../testing/src/app/demo/demo.spec.ts         |   3 -
 .../testing/src/app/demo/demo.testbed.spec.ts |  13 +-
 .../examples/testing/src/app/demo/demo.ts     |   4 -
 .../src/app/hero/hero-detail.component.css    |   3 +-
 .../src/app/hero/hero-list.component.css      |   3 +-
 .../testing/src/app/in-memory-data.service.ts |   1 -
 .../src/app/model/hero.service.spec.ts        |   4 -
 .../src/app/model/testing/http-client.spec.ts |  28 +--
 .../src/app/shared/canvas.component.ts        |   2 +-
 .../src/app/shared/title-case.pipe.spec.ts    |   7 +-
 .../src/app/twain/twain.component.spec.ts     |   2 -
 .../testing/src/app/twain/twain.component.ts  |   2 -
 .../src/app/welcome/welcome.component.ts      |   3 +-
 .../examples/testing/src/main-specs.ts        |   2 +-
 aio/content/examples/toh-pt0/src/styles.1.css |   2 +-
 .../src/app/heroes/heroes.component.1.html    |   9 +-
 .../src/app/heroes/heroes.component.css       |   3 +
 .../src/app/heroes/heroes.component.html      |   5 +-
 .../src/app/heroes/heroes.component.ts        |   2 -
 .../src/app/heroes/heroes.component.css       |  16 +-
 .../src/app/heroes/heroes.component.html      |   5 +-
 .../src/app/heroes/heroes.component.ts        |   5 +-
 .../app/hero-detail/hero-detail.component.css |   3 +
 .../hero-detail/hero-detail.component.html    |   5 +-
 .../app/hero-detail/hero-detail.component.ts  |   2 +-
 .../src/app/heroes/heroes.component.css       |  12 +-
 .../examples/toh-pt4/src/app/app.module.ts    |   2 -
 .../app/hero-detail/hero-detail.component.css |   3 +
 .../hero-detail/hero-detail.component.html    |   5 +-
 .../app/hero-detail/hero-detail.component.ts  |   2 -
 .../examples/toh-pt4/src/app/hero.service.ts  |   4 +-
 .../src/app/heroes/heroes.component.css       |  17 +-
 .../src/app/heroes/heroes.component.html      |   4 +-
 .../src/app/heroes/heroes.component.ts        |   6 +-
 .../src/app/messages/messages.component.css   |  36 ++--
 .../src/app/messages/messages.component.html  |   2 +-
 .../examples/toh-pt5/e2e/src/app.e2e-spec.ts  |   2 +-
 .../toh-pt5/src/app/app-routing.module.ts     |   8 +-
 .../toh-pt5/src/app/app.component.css         |  21 +--
 .../examples/toh-pt5/src/app/app.module.ts    |   7 -
 .../app/dashboard/dashboard.component.1.html  |  10 +-
 .../src/app/dashboard/dashboard.component.css |  95 +++++------
 .../app/dashboard/dashboard.component.html    |  14 +-
 .../app/hero-detail/hero-detail.component.css |  14 +-
 .../hero-detail/hero-detail.component.html    |   5 +-
 .../app/hero-detail/hero-detail.component.ts  |   2 -
 .../examples/toh-pt5/src/app/hero.service.ts  |  10 +-
 .../src/app/heroes/heroes.component.css       |  23 +--
 .../src/app/messages/messages.component.css   |  36 ++--
 .../src/app/messages/messages.component.html  |   2 +-
 aio/content/examples/toh-pt5/src/index.html   |   2 -
 .../examples/toh-pt6/e2e/src/app.e2e-spec.ts  |  18 +-
 .../toh-pt6/src/app/app.component.css         |  20 +--
 .../examples/toh-pt6/src/app/app.module.ts    |   6 -
 .../src/app/dashboard/dashboard.component.css |  99 +++++------
 .../app/dashboard/dashboard.component.html    |  10 +-
 .../app/dashboard/dashboard.component.spec.ts |   2 +-
 .../app/hero-detail/hero-detail.component.css |  15 +-
 .../hero-detail/hero-detail.component.html    |   5 +-
 .../app/hero-search/hero-search.component.css |  56 +++---
 .../hero-search/hero-search.component.html    |   3 +-
 .../app/hero-search/hero-search.component.ts  |   2 -
 .../examples/toh-pt6/src/app/hero.service.ts  |   7 +-
 .../src/app/heroes/heroes.component.css       |  69 +++++---
 .../src/app/heroes/heroes.component.html      |  10 +-
 .../src/app/heroes/heroes.component.ts        |   2 +-
 .../src/app/messages/messages.component.css   |  36 ++--
 .../src/app/messages/messages.component.html  |   2 +-
 .../universal/e2e/src/app.e2e-spec.ts         |   4 +-
 aio/content/examples/universal/server.ts      |   2 +-
 .../universal/src/app/app.component.css       |   5 -
 .../examples/universal/src/app/app.module.ts  |   7 -
 .../src/app/dashboard/dashboard.component.css |   4 +-
 .../app/hero-detail/hero-detail.component.css |   2 +-
 .../src/app/heroes/heroes.component.css       |   3 +-
 .../src/app/messages/messages.component.css   |  21 +--
 .../app/a-to-ajs-transclusion/app.module.ts   |   2 -
 .../src/app/downgrade-io/app.module.ts        |   4 -
 .../src/app/upgrade-io/app.module.ts          |   2 -
 .../phone-detail.component.spec.ts            |   7 -
 .../phone-detail/phone-detail.component.ts    |   8 -
 .../karma-test-shim.1.js                      |   4 +-
 .../app/app.module.ts                         |   3 -
 .../upgrade-phonecat-3-final/app/main.ts      |   5 -
 .../app/phone-list/phone-list.template.html   |   2 -
 .../upgrade-phonecat-3-final/index.html       |   2 -
 .../systemjs.config.1.js                      |   4 -
 .../user-input/src/app/keyup.components.ts    |   3 +-
 278 files changed, 683 insertions(+), 1835 deletions(-)

diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.css b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.css
index a3d5bf8161..d635cff06a 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.css
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.css
@@ -11,8 +11,6 @@ table {
   margin:20px;
   border:#ccc 1px solid;
 
-  -moz-border-radius:3px;
-  -webkit-border-radius:3px;
   border-radius:3px;
 }
 table th {
@@ -46,12 +44,8 @@ table tr:last-child td {
   border-bottom:0;
 }
 table tr:last-child td:first-child {
-  -moz-border-radius-bottomleft:3px;
-  -webkit-border-bottom-left-radius:3px;
   border-bottom-left-radius:3px;
 }
 table tr:last-child td:last-child {
-  -moz-border-radius-bottomright:3px;
-  -webkit-border-bottom-right-radius:3px;
   border-bottom-right-radius:3px;
 }
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
index 9de98806d7..e1ee6d62c5 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
@@ -67,9 +67,7 @@
         <td>{{movie.hero}}</td>
         <td>{{movie.releaseDate | date}}</td>
         <td>{{movie.mpaa | uppercase}}</td>
-  <!-- #docregion currency -->
         <td>{{movie.price | currency:'USD':true}}</td>
-  <!-- #enddocregion currency -->
         <td>{{movie.starRating | number:'1.1-2'}}</td>
         <td>{{movie.approvalRating | percent: '1.0-0'}}</td>
       </tr>
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
index 9955550c8d..88be3a54fb 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
@@ -1,8 +1,6 @@
 /* tslint:disable:no-unused-variable */
 // #docplaster
-// #docregion import
 import { Component } from '@angular/core';
-// #enddocregion import
 import { IMovie } from './movie';
 import { MovieService } from './movie.service';
 
diff --git a/aio/content/examples/animations/src/app/app.component.1.ts b/aio/content/examples/animations/src/app/app.component.1.ts
index 39e2022dad..11b497be1c 100644
--- a/aio/content/examples/animations/src/app/app.component.1.ts
+++ b/aio/content/examples/animations/src/app/app.component.1.ts
@@ -1,18 +1,6 @@
 // #docplaster
-// #docregion imports
 import { Component, HostBinding } from '@angular/core';
-import {
-  trigger,
-  state,
-  style,
-  animate,
-  transition,
-  // ...
-} from '@angular/animations';
 
-// #enddocregion imports
-
-// #docregion decorator, toggle-app-animations
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -21,15 +9,10 @@ import {
     // animation triggers go here
   ]
 })
-// #enddocregion decorator
 export class AppComponent {
-  @HostBinding('@.disabled')
-  public animationsDisabled = false;
-// #enddocregion toggle-app-animations
+  @HostBinding('@.disabled') public animationsDisabled = false;
 
   toggleAnimations() {
     this.animationsDisabled = !this.animationsDisabled;
   }
-// #docregion toggle-app-animations
 }
-// #enddocregion toggle-app-animations
diff --git a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
index 164adb8ab9..8fa7c43ca9 100644
--- a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
@@ -16,7 +16,6 @@ import { Hero } from './hero';
 
 @Component({
   selector: 'app-hero-list-enter-leave',
-  // #docregion template
   template: `
     <ul class="heroes">
       <li *ngFor="let hero of heroes"
@@ -28,7 +27,6 @@ import { Hero } from './hero';
       </li>
     </ul>
   `,
-  // #enddocregion template
   styleUrls: ['./hero-list-page.component.css'],
   // #docregion animationdef
   animations: [
diff --git a/aio/content/examples/animations/src/app/hero-list-page.component.css b/aio/content/examples/animations/src/app/hero-list-page.component.css
index 67a3fb0c9c..02b2b9fc8c 100644
--- a/aio/content/examples/animations/src/app/hero-list-page.component.css
+++ b/aio/content/examples/animations/src/app/hero-list-page.component.css
@@ -62,8 +62,7 @@
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
diff --git a/aio/content/examples/animations/src/app/open-close.component.3.ts b/aio/content/examples/animations/src/app/open-close.component.3.ts
index 64ca362f36..dba69614e5 100644
--- a/aio/content/examples/animations/src/app/open-close.component.3.ts
+++ b/aio/content/examples/animations/src/app/open-close.component.3.ts
@@ -1,29 +1,12 @@
 // #docplaster
 // #docregion reusable
 import { Component } from '@angular/core';
-import { useAnimation, transition, trigger, style, animate } from '@angular/animations';
+import { transition, trigger, useAnimation } from '@angular/animations';
 import { transAnimation } from './animations';
 
 @Component({
-// #enddocregion reusable
   selector: 'app-open-close-reusable',
-// #docregion runtime
   animations: [
-    transition('open => closed', [
-      style({
-        height: '200 px',
-        opacity: '{{ opacity }}',
-        backgroundcolor: 'yelow'
-      }),
-      animate('{{ time }}'),
-    ], {
-        params: {
-          time: '1s',
-          opacity: '1'
-        }
-      }),
-// #enddocregion runtime
-// #docregion reusable
     trigger('openClose', [
       transition('open => closed', [
         useAnimation(transAnimation, {
@@ -36,10 +19,9 @@ import { transAnimation } from './animations';
         })
       ])
     ])
-// #enddocregion reusable
+  ],
   templateUrl: 'open-close.component.html',
   styleUrls: ['open-close.component.css']
-// #docregion reusable
 })
 // #enddocregion reusable
 export class OpenCloseReusableComponent { }
diff --git a/aio/content/examples/animations/src/app/open-close.component.html b/aio/content/examples/animations/src/app/open-close.component.html
index b58a2e812d..5d0a615f3f 100644
--- a/aio/content/examples/animations/src/app/open-close.component.html
+++ b/aio/content/examples/animations/src/app/open-close.component.html
@@ -1,13 +1,10 @@
-<!-- #docplaster -->
 <nav>
   <button (click)="toggle()">Toggle Open/Close</button>
 </nav>
 
-<!-- #docregion compare, trigger -->
 <div [@openClose]="isOpen ? 'open' : 'closed'"
   (@openClose.start)="onAnimationEvent($event)"
   (@openClose.done)="onAnimationEvent($event)"
   class="open-close-container">  
   <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
 </div>
-<!-- #enddocregion compare, trigger -->
diff --git a/aio/content/examples/animations/src/app/open-close.component.ts b/aio/content/examples/animations/src/app/open-close.component.ts
index c3b5bcf633..e62abe5601 100644
--- a/aio/content/examples/animations/src/app/open-close.component.ts
+++ b/aio/content/examples/animations/src/app/open-close.component.ts
@@ -5,7 +5,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
 // #docregion component, events1
 @Component({
   selector: 'app-open-close',
-// #docregion trigger, trigger-wildcard1, trigger-transition
+// #docregion trigger-wildcard1, trigger-transition
   animations: [
     trigger('openClose', [
 // #docregion state1
@@ -33,7 +33,7 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
       transition('closed => open', [
         animate('0.5s')
       ]),
-// #enddocregion transition2, trigger, component
+// #enddocregion transition2, component
 // #docregion trigger-wildcard1
       transition('* => closed', [
         animate('1s')
@@ -54,15 +54,14 @@ import { trigger, transition, state, animate, style, AnimationEvent } from '@ang
         ),
       ]),
 // #enddocregion transition4
-// #docregion transition3
       transition('* => *', [
         animate('1s')
       ]),
-// #enddocregion transition3, trigger-transition
-// #docregion trigger, component, trigger-wildcard1, events1
+// #enddocregion trigger-transition
+// #docregion component, trigger-wildcard1, events1
     ]),
   ],
-// #enddocregion trigger, trigger-wildcard1
+// #enddocregion trigger-wildcard1
   templateUrl: 'open-close.component.html',
   styleUrls: ['open-close.component.css']
 })
diff --git a/aio/content/examples/architecture/src/app/app.component.ts b/aio/content/examples/architecture/src/app/app.component.ts
index b250b678a2..95fc839cc2 100644
--- a/aio/content/examples/architecture/src/app/app.component.ts
+++ b/aio/content/examples/architecture/src/app/app.component.ts
@@ -9,6 +9,4 @@ import { Component } from '@angular/core';
     <app-sales-tax></app-sales-tax>
   `
 })
-// #docregion export
 export class AppComponent { }
-// #enddocregion export
diff --git a/aio/content/examples/architecture/src/app/app.module.ts b/aio/content/examples/architecture/src/app/app.module.ts
index fdd2da883b..2090120042 100644
--- a/aio/content/examples/architecture/src/app/app.module.ts
+++ b/aio/content/examples/architecture/src/app/app.module.ts
@@ -22,13 +22,11 @@ import { Logger } from './logger.service';
     HeroListComponent,
     SalesTaxComponent
   ],
-// #docregion providers
   providers: [
     BackendService,
     HeroService,
     Logger
   ],
-// #enddocregion providers
   bootstrap: [ AppComponent ]
 })
 // #docregion export
diff --git a/aio/content/examples/architecture/src/app/mini-app.ts b/aio/content/examples/architecture/src/app/mini-app.ts
index dfc22c461e..42d19c59dd 100644
--- a/aio/content/examples/architecture/src/app/mini-app.ts
+++ b/aio/content/examples/architecture/src/app/mini-app.ts
@@ -7,9 +7,7 @@ export class Logger {
   log(message: string) { console.log(message); }
 }
 
-// #docregion import-core-component
 import { Component } from '@angular/core';
-// #enddocregion import-core-component
 
 @Component({
  selector: 'app-root',
@@ -35,9 +33,7 @@ import { BrowserModule } from '@angular/platform-browser';
   exports:      [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
-// #docregion export
 export class AppModule { }
-// #enddocregion export
 // #enddocregion module
 
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
diff --git a/aio/content/examples/attribute-binding/src/app/app.component.html b/aio/content/examples/attribute-binding/src/app/app.component.html
index 7514b871c1..1f8c2ede6b 100644
--- a/aio/content/examples/attribute-binding/src/app/app.component.html
+++ b/aio/content/examples/attribute-binding/src/app/app.component.html
@@ -1,7 +1,6 @@
 
 <h1>Attribute, class, and style bindings</h1>
 <h2>Attribute binding</h2>
-<!-- #docregion attrib-binding-colspan -->
 <table border=1>
   <!-- #docregion colspan -->
   <!--  expression calculates colspan=2 -->
@@ -18,7 +17,6 @@
 
   <tr><td>Five</td><td>Six</td></tr>
 </table>
-<!-- #enddocregion attrib-binding-colspan -->
 
 <div>
   <!-- #docregion attrib-binding-aria -->
@@ -66,4 +64,6 @@
 <comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
 <!-- #enddocregion style-delegation -->
 
-
+<!-- #docregion attribute-decorator -->
+<app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>
+<!-- #enddocregion attribute-decorator -->
diff --git a/aio/content/examples/attribute-binding/src/app/app.module.ts b/aio/content/examples/attribute-binding/src/app/app.module.ts
index 82bb10d175..c835fc16cb 100644
--- a/aio/content/examples/attribute-binding/src/app/app.module.ts
+++ b/aio/content/examples/attribute-binding/src/app/app.module.ts
@@ -1,15 +1,15 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
-
 import { AppComponent } from './app.component';
 import { CompWithHostBindingComponent } from './comp-with-host-binding.component';
-
+import { MyInputWithAttributeDecoratorComponent } from './my-input-with-attribute-decorator.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    CompWithHostBindingComponent
+    CompWithHostBindingComponent,
+    MyInputWithAttributeDecoratorComponent
   ],
   imports: [
     BrowserModule
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.1.html b/aio/content/examples/attribute-directives/src/app/app.component.1.html
index f05c4a1bd3..9a9bfccd73 100644
--- a/aio/content/examples/attribute-directives/src/app/app.component.1.html
+++ b/aio/content/examples/attribute-directives/src/app/app.component.1.html
@@ -4,11 +4,7 @@
 <p appHighlight>Highlight me!</p>
 <!-- #enddocregion applied  -->
 
-<!-- #docregion color-1 -->
 <p appHighlight highlightColor="yellow">Highlighted in yellow</p>
 <p appHighlight [highlightColor]="'orange'">Highlighted in orange</p>
-<!-- #enddocregion color-1 -->
 
-<!-- #docregion color-2 -->
 <p appHighlight [highlightColor]="color">Highlighted with parent component's color</p>
-<!-- #enddocregion color-2 -->
\ No newline at end of file
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
index d039083beb..fac7b79e4b 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
@@ -1,8 +1,8 @@
 /* tslint:disable:no-unused-variable member-ordering */
 // #docplaster
-// #docregion imports,
+// #docregion imports
 import { Directive, ElementRef, HostListener } from '@angular/core';
-// #enddocregion imports,
+// #enddocregion imports
 import { Input } from '@angular/core';
 // #docregion
 
@@ -10,37 +10,22 @@ import { Input } from '@angular/core';
   selector: '[appHighlight]'
 })
 export class HighlightDirective {
-  // #docregion ctor
-  constructor(private el: ElementRef) { }
-  // #enddocregion ctor
 
-  // #docregion mouse-methods, host
+  constructor(private el: ElementRef) { }
+
+  // #docregion mouse-methods
   @HostListener('mouseenter') onMouseEnter() {
-    // #enddocregion host
     this.highlight('yellow');
-    // #docregion host
   }
 
   @HostListener('mouseleave') onMouseLeave() {
-    // #enddocregion host
     this.highlight(null);
-    // #docregion host
   }
-  // #enddocregion host
 
   private highlight(color: string) {
     this.el.nativeElement.style.backgroundColor = color;
   }
-  // #enddocregion mouse-methods,
+  // #enddocregion mouse-methods
 
-  // #docregion color
-  @Input() highlightColor: string;
-  // #enddocregion color
-
-  // #docregion color-2
-  @Input() appHighlight: string;
-  // #enddocregion color-2
-
-// #docregion
 }
 // #enddocregion
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
index 01c7cb679c..0d61602c08 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
@@ -10,13 +10,13 @@ export class HighlightDirective {
 
   constructor(private el: ElementRef) { }
 
-  @Input('appHighlight') highlightColor: string;
+  // #docregion input
+  @Input() appHighlight: string;
+  // #enddocregion input
 
-  // #docregion mouse-enter
   @HostListener('mouseenter') onMouseEnter() {
-    this.highlight(this.highlightColor || 'red');
+    this.highlight(this.appHighlight || 'red');
   }
-  // #enddocregion mouse-enter
 
   @HostListener('mouseleave') onMouseLeave() {
     this.highlight(null);
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
index dd138ae09d..fbee354143 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
@@ -12,9 +12,7 @@ export class HighlightDirective {
   @Input() defaultColor: string;
   // #enddocregion defaultColor
 
-  // #docregion color
   @Input('appHighlight') highlightColor: string;
-  // #enddocregion color
 
   // #docregion mouse-enter
   @HostListener('mouseenter') onMouseEnter() {
diff --git a/aio/content/examples/bootstrapping/src/app/app.module.ts b/aio/content/examples/bootstrapping/src/app/app.module.ts
index 3059978a82..b7d1a9bbae 100644
--- a/aio/content/examples/bootstrapping/src/app/app.module.ts
+++ b/aio/content/examples/bootstrapping/src/app/app.module.ts
@@ -1,6 +1,4 @@
 // #docplaster
-// #docregion whole-ngmodule
-
 // imports
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
@@ -32,5 +30,3 @@ import { ItemDirective } from './item.directive';
   bootstrap: [AppComponent]
 })
 export class AppModule { }
-
-// #enddocregion whole-ngmodule
diff --git a/aio/content/examples/built-in-directives/src/app/app.component.css b/aio/content/examples/built-in-directives/src/app/app.component.css
index 201fe682c4..52cccf1628 100644
--- a/aio/content/examples/built-in-directives/src/app/app.component.css
+++ b/aio/content/examples/built-in-directives/src/app/app.component.css
@@ -59,7 +59,7 @@ img {
 
 .study,
 .modified {
-  font-family: "Brush Script MT";
+  font-family: "Brush Script MT", cursive;
   font-size: 2rem;
 }
 
diff --git a/aio/content/examples/built-in-directives/src/app/app.component.html b/aio/content/examples/built-in-directives/src/app/app.component.html
index 17b3fed9a4..646dd405b3 100644
--- a/aio/content/examples/built-in-directives/src/app/app.component.html
+++ b/aio/content/examples/built-in-directives/src/app/app.component.html
@@ -7,11 +7,8 @@
 <fieldset><h4>NgModel examples</h4>
   <p>Current item name: {{currentItem.name}}</p>
   <p>
-    <!-- #docregion without-NgModel -->
     <label for="without">without NgModel:</label>
-    <input [value]="currentItem.name" (input)="currentItem.name=$event.target.value" id="without">
-    <!-- #enddocregion without-NgModel -->
-
+    <input [value]="currentItem.name" (input)="currentItem.name=getValue($event.target)" id="without">
   </p>
 
   <p>
@@ -27,10 +24,8 @@
   </p>
 
   <p>
-    <!-- #docregion NgModelChange -->
     <label for="example-change">(ngModelChange)="...name=$event":</label>
     <input [ngModel]="currentItem.name" (ngModelChange)="currentItem.name=$event" id="example-change">
-      <!-- #enddocregion NgModelChange -->
   </p>
 
   <p>
@@ -77,12 +72,9 @@
 
 <!-- NgStyle binding -->
 <hr><h3>NgStyle Binding</h3>
-<!-- #docregion without-ng-style -->
 <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'">
   This div is x-large or smaller.
 </div>
-<!-- #enddocregion without-ng-style -->
-
 
 <h4>[ngStyle] binding to currentStyles - CSS property names</h4>
 <p>currentStyles is {{currentStyles | json}}</p>
@@ -134,7 +126,6 @@
 <hr>
 
 <h4>Show/hide vs. NgIf</h4>
-<!-- #docregion NgIf-3 -->
 <!-- isSpecial is true -->
 <div [class.hidden]="!isSpecial">Show with class</div>
 <div [class.hidden]="isSpecial">Hide with class</div>
@@ -144,7 +135,6 @@
 
 <div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
 <div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>
-<!-- #enddocregion NgIf-3 -->
 
 
 <hr>
diff --git a/aio/content/examples/built-in-directives/src/app/app.component.ts b/aio/content/examples/built-in-directives/src/app/app.component.ts
index a2035effa5..e120c5c625 100644
--- a/aio/content/examples/built-in-directives/src/app/app.component.ts
+++ b/aio/content/examples/built-in-directives/src/app/app.component.ts
@@ -21,7 +21,10 @@ export class AppComponent implements OnInit {
   item: Item; // defined to demonstrate template context precedence
   items: Item[];
 
+  // #docregion item
   currentItem: Item;
+  // #enddocregion item
+
 
 
   // trackBy change counting
@@ -111,6 +114,9 @@ export class AppComponent implements OnInit {
 
   trackById(index: number, item: any): number { return item.id; }
 
+  getValue(target: EventTarget): string {
+    return (target as HTMLInputElement).value;
+  }
 }
 
 
diff --git a/aio/content/examples/built-in-directives/src/app/item-switch.component.ts b/aio/content/examples/built-in-directives/src/app/item-switch.component.ts
index b40d5c9af5..59909eedc7 100644
--- a/aio/content/examples/built-in-directives/src/app/item-switch.component.ts
+++ b/aio/content/examples/built-in-directives/src/app/item-switch.component.ts
@@ -5,9 +5,13 @@ import { Item } from './item';
   selector: 'app-stout-item',
   template: `I'm a little {{item.name}}, short and stout!`
 })
+
+// #docregion input
 export class StoutItemComponent {
   @Input() item: Item;
 }
+// #enddocregion input
+
 
 @Component({
   selector: 'app-best-item',
diff --git a/aio/content/examples/component-styles/src/app/hero-details.component.ts b/aio/content/examples/component-styles/src/app/hero-details.component.ts
index 3a249b753a..3d4dbd0712 100644
--- a/aio/content/examples/component-styles/src/app/hero-details.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-details.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
-// #docregion styleurls
 @Component({
   selector: 'app-hero-details',
   template: `
@@ -12,7 +11,5 @@ import { Hero } from './hero';
   styleUrls: ['./hero-details.component.css']
 })
 export class HeroDetailsComponent {
-  // #enddocregion styleurls
   @Input() hero: Hero;
-  // #docregion styleurls
 }
diff --git a/aio/content/examples/component-styles/src/app/quest-summary.component.ts b/aio/content/examples/component-styles/src/app/quest-summary.component.ts
index 6d7b580582..9b75c0f403 100644
--- a/aio/content/examples/component-styles/src/app/quest-summary.component.ts
+++ b/aio/content/examples/component-styles/src/app/quest-summary.component.ts
@@ -5,10 +5,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
 // #docregion
 @Component({
   selector: 'app-quest-summary',
-  // #docregion urls
   templateUrl: './quest-summary.component.html',
   styleUrls:  ['./quest-summary.component.css']
-  // #enddocregion urls
 })
 export class QuestSummaryComponent { }
 // #enddocregion
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
index 3c1f49682f..052b4eb114 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
@@ -1,26 +1,18 @@
-// #docregion
 import { Component } from '@angular/core';
 
-// #docregion import-services
 import { LoggerService } from './logger.service';
 import { UserContextService } from './user-context.service';
-import { UserService } from './user.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-// #enddocregion import-services
 
   private userId = 1;
 
-  // #docregion ctor
   constructor(logger: LoggerService, public userContext: UserContextService) {
     userContext.loadUser(this.userId);
     logger.logInfo('AppComponent initialized');
   }
-  // #enddocregion ctor
-// #docregion import-services
 }
-// #enddocregion import-services
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts
index a2a1f02092..23a802b0f6 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts
@@ -8,9 +8,7 @@ import { LoggerService } from './logger.service';
 @Injectable({
   providedIn: 'root'
 })
-// #docregion date-logger-service-signature
 export class DateLoggerService extends LoggerService
-// #enddocregion date-logger-service-signature
 {
   logInfo(msg: any)  { super.logInfo(stamp(msg)); }
   logDebug(msg: any) { super.logInfo(stamp(msg)); }
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
index ee2fdf88ec..e2a03e42b4 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
@@ -17,11 +17,9 @@ import { LoggerService } from './logger.service';
 })
 export class HeroBiosComponent {
 // #enddocregion simple
-// #docregion ctor
   constructor(logger: LoggerService) {
     logger.logInfo('Creating HeroBiosComponent');
   }
-// #enddocregion ctor
 // #docregion simple
 }
 // #enddocregion simple
@@ -36,9 +34,7 @@ export class HeroBiosComponent {
     <app-hero-bio [heroId]="2"> <app-hero-contact></app-hero-contact> </app-hero-bio>
     <app-hero-bio [heroId]="3"> <app-hero-contact></app-hero-contact> </app-hero-bio>`,
   // #enddocregion template
-  // #docregion class-provider
   providers: [HeroService]
-  // #enddocregion class-provider
 })
 export class HeroBiosAndContactsComponent {
   constructor(logger: LoggerService) {
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
index bdf78a3641..e986c37370 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
@@ -30,9 +30,7 @@ export class HeroContactComponent {
       this.hasLogger = true;
       loggerService.logInfo('HeroContactComponent can log!');
     }
-  // #docregion ctor
   }
-  // #enddocregion ctor
 
   get phoneNumber() { return this.heroCache.hero.phone; }
 
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
index 9630fe3575..1f320a89d1 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
@@ -48,13 +48,11 @@ const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
 export class HeroOfTheMonthComponent {
   logs: string[] = [];
 
-// #docregion ctor-signature
   constructor(
       logger: MinimalLogger,
       public heroOfTheMonth: Hero,
       @Inject(RUNNERS_UP) public runnersUp: string,
       @Inject(TITLE) public title: string)
-// #enddocregion ctor-signature
   {
     this.logs = logger.logs;
     logger.logInfo('starting up');
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
index cf25406ed5..4596b3b497 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
@@ -35,7 +35,6 @@ export function provideTheParent
 
 
 ///////// C - Child //////////
-// #docregion carol
 const templateC = `
   <div class="c">
     <h3>{{name}}</h3>
@@ -54,7 +53,6 @@ export class CarolComponent {
   // #enddocregion carol-ctor
 }
 // #enddocregion carol-class
-// #enddocregion carol
 
 @Component({
   selector: 'chris',
@@ -132,7 +130,7 @@ export class BethComponent implements Parent {
 
 ///////// A - Grandparent //////
 
-// #docregion alex, alex-1
+// #docregion alex-1
 @Component({
   selector: 'alex',
   template: `
@@ -157,11 +155,10 @@ export class AlexComponent extends Base
 {
   name = 'Alex';
 }
-// #enddocregion alex, alex-1
+// #enddocregion alex-1
 
 /////
 
-// #docregion alice
 @Component({
   selector: 'alice',
   template: `
@@ -182,7 +179,6 @@ export class AliceComponent implements Parent
 {
   name = 'Alice';
 }
-// #enddocregion alice
 
 //////  Cathy ///////////
 /**
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts b/aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts
index 1c0afb823c..b06115e0b7 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/runners-up.ts
@@ -5,9 +5,7 @@ import { InjectionToken } from '@angular/core';
 import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
-// #docregion runners-up
 export const RUNNERS_UP = new InjectionToken<string>('RunnersUp');
-// #enddocregion runners-up
 
 // #docregion factory-synopsis
 export function runnersUpFactory(take: number) {
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
index 9f25b2a9a8..68a05a8776 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
@@ -6,7 +6,7 @@ import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
 /////// HeroesBaseComponent /////
-// #docregion heroes-base, injection
+// #docregion heroes-base
 @Component({
   selector: 'app-unsorted-heroes',
   template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
@@ -14,7 +14,6 @@ import { HeroService } from './hero.service';
 })
 export class HeroesBaseComponent implements OnInit {
   constructor(private heroService: HeroService) { }
-// #enddocregion injection
 
   heroes: Array<Hero>;
 
@@ -26,9 +25,8 @@ export class HeroesBaseComponent implements OnInit {
   // Post-process heroes in derived class override.
   protected afterGetHeroes() {}
 
-// #docregion injection
 }
-// #enddocregion heroes-base,injection
+// #enddocregion heroes-base
 
 /////// SortedHeroesComponent /////
 // #docregion sorted-heroes
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/storage.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/storage.service.ts
index df59c4e08a..a31f5a3905 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/storage.service.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/storage.service.ts
@@ -1,14 +1,10 @@
-// #docregion
 import { Inject, Injectable, InjectionToken } from '@angular/core';
 
-// #docregion storage-token
 export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
   providedIn: 'root',
   factory: () => localStorage
 });
-// #enddocregion storage-token
 
-// #docregion inject-storage-token
 @Injectable({
   providedIn: 'root'
 })
@@ -31,4 +27,3 @@ export class BrowserStorageService {
     this.storage.clear();
   }
 }
-// #enddocregion inject-storage-token
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
index e6419c5106..1a08a28b05 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
@@ -1,27 +1,19 @@
-// #docplaster
-// #docregion
 import { Injectable } from '@angular/core';
 
 import { LoggerService } from './logger.service';
 import { UserService } from './user.service';
 
-// #docregion injectables, injectable
 @Injectable({
   providedIn: 'root'
 })
 export class UserContextService {
-// #enddocregion injectables, injectable
   name: string;
   role: string;
   loggedInSince: Date;
 
-  // #docregion ctor, injectables
   constructor(private userService: UserService, private loggerService: LoggerService) {
-   // #enddocregion ctor, injectables
     this.loggedInSince = new Date();
-   // #docregion ctor, injectables
   }
-  // #enddocregion ctor, injectables
 
   loadUser(userId: number) {
     const user = this.userService.getUserById(userId);
@@ -30,6 +22,4 @@ export class UserContextService {
 
     this.loggerService.logDebug('loaded User');
   }
-// #docregion injectables, injectable
 }
-// #enddocregion injectables, injectable
diff --git a/aio/content/examples/dependency-injection/src/app/app.component.2.ts b/aio/content/examples/dependency-injection/src/app/app.component.2.ts
index 1d775e9214..461cfe4a51 100644
--- a/aio/content/examples/dependency-injection/src/app/app.component.2.ts
+++ b/aio/content/examples/dependency-injection/src/app/app.component.2.ts
@@ -1,9 +1,6 @@
-// #docregion
-// #docregion imports
 import { Component, Inject } from '@angular/core';
 
 import { APP_CONFIG, AppConfig } from './app.config';
-// #enddocregion imports
 
 @Component({
   selector: 'app-root',
@@ -22,5 +19,3 @@ export class AppComponent {
   }
   // #enddocregion ctor
 }
-// #enddocregion
-
diff --git a/aio/content/examples/dependency-injection/src/app/app.component.ts b/aio/content/examples/dependency-injection/src/app/app.component.ts
index b69856fa0a..a02e3e6682 100644
--- a/aio/content/examples/dependency-injection/src/app/app.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/app.component.ts
@@ -1,11 +1,7 @@
-// #docplaster
-// #docregion
-// #docregion imports
 import { Component, Inject } from '@angular/core';
 
 import { APP_CONFIG, AppConfig } from './app.config';
 import { UserService } from './user.service';
-// #enddocregion imports
 
 @Component({
   selector: 'app-root',
@@ -28,13 +24,11 @@ import { UserService } from './user.service';
 export class AppComponent {
   title: string;
 
-  // #docregion ctor
   constructor(
     @Inject(APP_CONFIG) config: AppConfig,
     private userService: UserService) {
     this.title = config.title;
   }
-  // #enddocregion ctor
 
   get isAuthorized() { return this.user.isAuthorized; }
   nextUser()         { this.userService.getNewUser(); }
diff --git a/aio/content/examples/dependency-injection/src/app/app.module.ts b/aio/content/examples/dependency-injection/src/app/app.module.ts
index 981faba079..2bf52f9c1f 100644
--- a/aio/content/examples/dependency-injection/src/app/app.module.ts
+++ b/aio/content/examples/dependency-injection/src/app/app.module.ts
@@ -15,7 +15,6 @@ import { UserService } from './user.service';
 
 import { ProvidersModule } from './providers.module';
 
-// #docregion ngmodule
 @NgModule({
   imports: [
     BrowserModule,
@@ -25,14 +24,12 @@ import { ProvidersModule } from './providers.module';
     AppComponent,
     CarComponent,
     HeroesComponent,
-    // #enddocregion ngmodule
     HeroesTspComponent,
     HeroListComponent,
     InjectorComponent,
     TestComponent
-    // #docregion ngmodule
   ],
-  // #docregion providers, providers-2
+  // #docregion providers
   providers: [
     // #enddocregion providers
     Logger,
@@ -40,7 +37,7 @@ import { ProvidersModule } from './providers.module';
     UserService,
     { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
   ],
-  // #enddocregion providers, providers-2
+  // #enddocregion providers
   exports: [ CarComponent, HeroesComponent ],
   bootstrap: [ AppComponent ]
 })
diff --git a/aio/content/examples/dependency-injection/src/app/car/car-creations.ts b/aio/content/examples/dependency-injection/src/app/car/car-creations.ts
index 23011ee626..143a63a1f4 100644
--- a/aio/content/examples/dependency-injection/src/app/car/car-creations.ts
+++ b/aio/content/examples/dependency-injection/src/app/car/car-creations.ts
@@ -1,47 +1,36 @@
 // Examples with car and engine variations
 
-// #docplaster
 import { Car, Engine, Tires } from './car';
 
 ///////// example 1 ////////////
 export function simpleCar() {
-  // #docregion car-ctor-instantiation
   // Simple car with 4 cylinders and Flintstone tires.
   const car = new Car(new Engine(), new Tires());
-  // #enddocregion car-ctor-instantiation
   car.description = 'Simple';
   return car;
 }
 
 
 ///////// example 2 ////////////
-// #docregion car-ctor-instantiation-with-param
 class Engine2 {
   constructor(public cylinders: number) { }
 }
-// #enddocregion car-ctor-instantiation-with-param
 
 export function superCar() {
-  // #docregion car-ctor-instantiation-with-param
   // Super car with 12 cylinders and Flintstone tires.
   const bigCylinders = 12;
   const car = new Car(new Engine2(bigCylinders), new Tires());
-  // #enddocregion car-ctor-instantiation-with-param
   car.description = 'Super';
   return car;
 }
 
 /////////// example 3 //////////
-// #docregion car-ctor-instantiation-with-mocks
 class MockEngine extends Engine { cylinders = 8; }
 class MockTires  extends Tires  { make = 'YokoGoodStone'; }
 
-// #enddocregion car-ctor-instantiation-with-mocks
 export function testCar() {
-  // #docregion car-ctor-instantiation-with-mocks
   // Test car with 8 cylinders and YokoGoodStone tires.
   const car = new Car(new MockEngine(), new MockTires());
-  // #enddocregion car-ctor-instantiation-with-mocks
   car.description = 'Test';
   return car;
 }
diff --git a/aio/content/examples/dependency-injection/src/app/car/car-injector.ts b/aio/content/examples/dependency-injection/src/app/car/car-injector.ts
index 9611bb0073..ba2449b6ff 100644
--- a/aio/content/examples/dependency-injection/src/app/car/car-injector.ts
+++ b/aio/content/examples/dependency-injection/src/app/car/car-injector.ts
@@ -3,21 +3,16 @@ import { Injector } from '@angular/core';
 import { Car, Engine, Tires } from './car';
 import { Logger } from '../logger.service';
 
-// #docregion injector
 export function useInjector() {
   let injector: Injector;
-  // #enddocregion injector
   /*
-  // #docregion injector-no-new
   // Cannot instantiate an Injector like this!
   let injector = new Injector([
     { provide: Car, deps: [Engine, Tires] },
     { provide: Engine, deps: [] },
     { provide: Tires, deps: [] }
   ]);
-  // #enddocregion injector-no-new
   */
-  // #docregion injector, injector-create-and-call
   injector = Injector.create({
     providers: [
       { provide: Car, deps: [Engine, Tires] },
@@ -25,9 +20,7 @@ export function useInjector() {
       { provide: Tires, deps: [] }
     ]
   });
-  // #docregion injector-call
   const car = injector.get(Car);
-  // #enddocregion injector-call, injector-create-and-call
   car.description = 'Injector';
 
   injector = Injector.create({
diff --git a/aio/content/examples/dependency-injection/src/app/car/car-no-di.ts b/aio/content/examples/dependency-injection/src/app/car/car-no-di.ts
index 9026edebc2..07a5864fa1 100644
--- a/aio/content/examples/dependency-injection/src/app/car/car-no-di.ts
+++ b/aio/content/examples/dependency-injection/src/app/car/car-no-di.ts
@@ -1,10 +1,8 @@
 // Car without DI
 import { Engine, Tires } from './car';
 
-// #docregion car
 export class Car {
 
-  // #docregion car-ctor
   public engine: Engine;
   public tires: Tires;
   public description = 'No DI';
@@ -13,7 +11,6 @@ export class Car {
     this.engine = new Engine();
     this.tires = new Tires();
   }
-  // #enddocregion car-ctor
 
   // Method using the engine and tires
   drive() {
@@ -21,4 +18,3 @@ export class Car {
       `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
   }
 }
-// #enddocregion car
diff --git a/aio/content/examples/dependency-injection/src/app/car/car.ts b/aio/content/examples/dependency-injection/src/app/car/car.ts
index 37162c570b..04b87c0284 100644
--- a/aio/content/examples/dependency-injection/src/app/car/car.ts
+++ b/aio/content/examples/dependency-injection/src/app/car/car.ts
@@ -11,11 +11,9 @@ export class Tires {
 
 @Injectable()
 export class Car {
-  // #docregion car-ctor
   public description = 'DI';
 
   constructor(public engine: Engine, public tires: Tires) { }
-  // #enddocregion car-ctor
 
   // Method using the engine and tires
   drive() {
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
index 995d2e4441..24536ef6a0 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { Component } from '@angular/core';
 import { HEROES } from './mock-heroes';
 
@@ -10,8 +9,6 @@ import { HEROES } from './mock-heroes';
     </div>
   `
 })
-// #docregion class
 export class HeroListComponent {
   heroes = HEROES;
 }
-// #enddocregion class
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
index b126a0361e..836116fa80 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
@@ -22,9 +22,7 @@ import { HeroService } from './hero.service';
 export class HeroListComponent {
   heroes: Hero[];
 
-  // #docregion ctor
   constructor(heroService: HeroService) {
     this.heroes = heroService.getHeroes();
   }
-  // #enddocregion ctor
 }
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts
index a9bf656e92..f0eb33de0c 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { Injectable } from '@angular/core';
 import { HEROES } from './mock-heroes';
 import { Logger } from '../logger.service';
@@ -8,9 +7,7 @@ import { Logger } from '../logger.service';
 })
 export class HeroService {
 
-  // #docregion ctor
   constructor(private logger: Logger) {  }
-  // #enddocregion ctor
 
   getHeroes() {
     this.logger.log('Getting heroes ...');
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts
index 9008bf15c3..402c5292ea 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts
@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { HEROES } from './mock-heroes';
 
 @Injectable({
-  // we declare that this service should be created
+  // declares that this service should be created
   // by the root application injector.
   providedIn: 'root',
 })
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
index a9e40e902c..ad6182b17e 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
@@ -1,16 +1,10 @@
-// #docplaster
-// #docregion, v1
 import { Component } from '@angular/core';
 
-// #enddocregion v1
 import { HeroService } from './hero.service';
 
-// #docregion v1
 @Component({
   selector: 'app-heroes',
-    // #enddocregion v1
   providers: [ HeroService ],
-  // #docregion v1
   template: `
     <h2>Heroes</h2>
     <app-hero-list></app-hero-list>
diff --git a/aio/content/examples/dependency-injection/src/app/injector.component.ts b/aio/content/examples/dependency-injection/src/app/injector.component.ts
index f04bf022d5..cf2b50b38c 100644
--- a/aio/content/examples/dependency-injection/src/app/injector.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/injector.component.ts
@@ -8,7 +8,6 @@ import { HeroService } from './heroes/hero.service';
 import { heroServiceProvider } from './heroes/hero.service.provider';
 import { Logger } from './logger.service';
 
-// #docregion injector
 @Component({
   selector: 'app-injectors',
   template: `
@@ -40,7 +39,6 @@ export class InjectorComponent implements OnInit {
     return this.injector.get(ROUS, rousDontExist);
   }
 }
-// #enddocregion injector
 
 /**
  * R.O.U.S. - Rodents Of Unusual Size
diff --git a/aio/content/examples/dependency-injection/src/app/providers.component.ts b/aio/content/examples/dependency-injection/src/app/providers.component.ts
index 5b1e770297..ee5ade88e0 100644
--- a/aio/content/examples/dependency-injection/src/app/providers.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/providers.component.ts
@@ -19,9 +19,9 @@ const template = '{{log}}';
 @Component({
   selector: 'provider-1',
   template,
-  // #docregion providers-1, providers-logger
+  // #docregion providers-logger
   providers: [Logger]
-  // #enddocregion providers-1, providers-logger
+  // #enddocregion providers-logger
 })
 export class Provider1Component {
   log: string;
@@ -114,11 +114,9 @@ export class OldLogger {
   selector: 'provider-6a',
   template,
   providers:
-    // #docregion providers-6a
     [ NewLogger,
       // Not aliased! Creates two instances of `NewLogger`
       { provide: OldLogger, useClass: NewLogger}]
-    // #enddocregion providers-6a
 })
 export class Provider6aComponent {
   log: string;
@@ -193,9 +191,7 @@ export class Provider8Component {
   // must be true else this component would have blown up at runtime
   log = 'Hero service injected successfully via heroServiceProvider';
 
-  // #docregion provider-8-ctor
   constructor(heroService: HeroService) { }
-  // #enddocregion provider-8-ctor
 }
 
 /////////////////
@@ -221,9 +217,7 @@ export class Provider9Component implements OnInit {
    constructor(private config: AppConfig){ }
    // #enddocregion provider-9-ctor-interface
    */
-  // #docregion provider-9-ctor
   constructor(@Inject(APP_CONFIG) private config: AppConfig) { }
-  // #enddocregion provider-9-ctor
 
   ngOnInit() {
      this.log = 'APP_CONFIG Application title is ' + this.config.title;
@@ -233,9 +227,7 @@ export class Provider9Component implements OnInit {
 //////////////////////////////////////////
 // Sample providers 1 to 7 illustrate a required logger dependency.
 // Optional logger, can be null
-// #docregion import-optional
 import { Optional } from '@angular/core';
-// #enddocregion import-optional
 
 const someMessage = 'Hello from the injected logger';
 
@@ -246,13 +238,11 @@ const someMessage = 'Hello from the injected logger';
 })
 export class Provider10Component implements OnInit {
   log: string;
-  // #docregion provider-10-ctor
   constructor(@Optional() private logger?: Logger) {
     if (this.logger) {
       this.logger.log(someMessage);
     }
   }
-  // #enddocregion provider-10-ctor
 
   ngOnInit() {
     this.log = this.logger ? this.logger.logs[0] : 'Optional logger was not available';
diff --git a/aio/content/examples/dependency-injection/src/app/test.component.ts b/aio/content/examples/dependency-injection/src/app/test.component.ts
index 9a82764f78..946cb71ad8 100644
--- a/aio/content/examples/dependency-injection/src/app/test.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/test.component.ts
@@ -22,7 +22,6 @@ export class TestComponent {
 /////////////////////////////////////
 function runTests() {
 
-  // #docregion spec
   const expectedHeroes = [{name: 'A'}, {name: 'B'}]
   const mockService = <HeroService> {getHeroes: () => expectedHeroes }
 
@@ -31,7 +30,6 @@ function runTests() {
     const component = new HeroListComponent(mockService);
     expect(component.heroes.length).toEqual(expectedHeroes.length);
   });
-  // #enddocregion spec
 
   return testResults;
 }
diff --git a/aio/content/examples/dependency-injection/src/main.ts b/aio/content/examples/dependency-injection/src/main.ts
index bf6732fff7..a9ca1caf8c 100644
--- a/aio/content/examples/dependency-injection/src/main.ts
+++ b/aio/content/examples/dependency-injection/src/main.ts
@@ -8,6 +8,4 @@ if (environment.production) {
   enableProdMode();
 }
 
-// #docregion bootstrap
 platformBrowserDynamic().bootstrapModule(AppModule);
-// #enddocregion bootstrap
diff --git a/aio/content/examples/displaying-data/src/app/app-ctor.component.1.ts b/aio/content/examples/displaying-data/src/app/app-ctor.component.1.ts
index aa696a3d63..12b586cb7a 100644
--- a/aio/content/examples/displaying-data/src/app/app-ctor.component.1.ts
+++ b/aio/content/examples/displaying-data/src/app/app-ctor.component.1.ts
@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
     <h2>My favorite hero is: {{myHero}}</h2>
     `
 })
-// #docregion class
 export class AppComponent {
   title: string;
   myHero: string;
diff --git a/aio/content/examples/displaying-data/src/app/app.component.1.ts b/aio/content/examples/displaying-data/src/app/app.component.1.ts
index 674ac5622b..349f7028ae 100644
--- a/aio/content/examples/displaying-data/src/app/app.component.1.ts
+++ b/aio/content/examples/displaying-data/src/app/app.component.1.ts
@@ -1,14 +1,11 @@
-// #docregion
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  // #docregion template
   template: `
     <h1>{{title}}</h1>
     <h2>My favorite hero is: {{myHero}}</h2>
     `
-  // #enddocregion template
 })
 export class AppComponent {
   title = 'Tour of Heroes';
diff --git a/aio/content/examples/displaying-data/src/app/app.component.2.ts b/aio/content/examples/displaying-data/src/app/app.component.2.ts
index 4d4e2d50e5..7b70d6ac1e 100644
--- a/aio/content/examples/displaying-data/src/app/app.component.2.ts
+++ b/aio/content/examples/displaying-data/src/app/app.component.2.ts
@@ -1,24 +1,18 @@
-// #docregion
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  // #docregion template
   template: `
     <h1>{{title}}</h1>
     <h2>My favorite hero is: {{myHero}}</h2>
     <p>Heroes:</p>
     <ul>
-  // #docregion li
       <li *ngFor="let hero of heroes">
         {{ hero }}
       </li>
-  // #enddocregion li
     </ul>
   `
-  // #enddocregion template
 })
-// #docregion class
 export class AppComponent {
   title = 'Tour of Heroes';
   heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
diff --git a/aio/content/examples/displaying-data/src/app/app.component.3.ts b/aio/content/examples/displaying-data/src/app/app.component.3.ts
index 435a9be767..c3ebc5c090 100644
--- a/aio/content/examples/displaying-data/src/app/app.component.3.ts
+++ b/aio/content/examples/displaying-data/src/app/app.component.3.ts
@@ -1,13 +1,9 @@
-// #docregion
 import { Component } from '@angular/core';
 
-// #docregion import
 import { Hero } from './hero';
-// #enddocregion import
 
 @Component({
   selector: 'app-root',
-  // #docregion template
   template: `
     <h1>{{title}}</h1>
     <h2>My favorite hero is: {{myHero.name}}</h2>
@@ -18,12 +14,9 @@ import { Hero } from './hero';
       </li>
     </ul>
   `
-  // #enddocregion template
 })
-// #docregion class
 export class AppComponent {
   title = 'Tour of Heroes';
-  // #docregion heroes
   heroes = [
     new Hero(1, 'Windstorm'),
     new Hero(13, 'Bombasto'),
@@ -31,5 +24,4 @@ export class AppComponent {
     new Hero(20, 'Tornado')
   ];
   myHero = this.heroes[0];
-  // #enddocregion heroes
 }
diff --git a/aio/content/examples/displaying-data/src/app/app.component.ts b/aio/content/examples/displaying-data/src/app/app.component.ts
index a03f3de1dd..de95f0adbb 100644
--- a/aio/content/examples/displaying-data/src/app/app.component.ts
+++ b/aio/content/examples/displaying-data/src/app/app.component.ts
@@ -1,5 +1,3 @@
-// #docplaster
-// #docregion final
 import { Component } from '@angular/core';
 
 import { Hero } from './hero';
@@ -15,9 +13,7 @@ import { Hero } from './hero';
       {{ hero.name }}
       </li>
   </ul>
-  // #docregion message
   <p *ngIf="heroes.length > 3">There are many heroes!</p>
-  // #enddocregion message
 `
 })
 export class AppComponent {
diff --git a/aio/content/examples/displaying-data/src/app/hero.ts b/aio/content/examples/displaying-data/src/app/hero.ts
index f89d26ad63..27671db0bb 100644
--- a/aio/content/examples/displaying-data/src/app/hero.ts
+++ b/aio/content/examples/displaying-data/src/app/hero.ts
@@ -1,9 +1,5 @@
-// #docregion
 export class Hero {
   constructor(
-    // #docregion id
     public id: number,
-    // #enddocregion id
     public name: string) { }
 }
-// #enddocregion
diff --git a/aio/content/examples/displaying-data/src/index.html b/aio/content/examples/displaying-data/src/index.html
index 3e5cbf7bea..6f42a6a510 100644
--- a/aio/content/examples/displaying-data/src/index.html
+++ b/aio/content/examples/displaying-data/src/index.html
@@ -7,10 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
 
-  <!-- #docregion body -->
   <body>
     <app-root></app-root>
   </body>
-  <!-- #enddocregion body -->
-
 </html>
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.html b/aio/content/examples/docs-style-guide/src/app/app.component.html
index 924599f6e9..9a96640214 100644
--- a/aio/content/examples/docs-style-guide/src/app/app.component.html
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.html
@@ -1,5 +1,3 @@
-<!-- #docplaster -->
-<!-- #docregion -->
 <h1>{{title}}</h1>
 <h2>My Heroes</h2>
 <ul class="heroes">
@@ -14,8 +12,6 @@
   <div><label>id: </label>{{selectedHero.id}}</div>
   <div>
     <label>name: </label>
-    <!-- #docregion selected-hero -->
     <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-    <!-- #enddocregion selected-hero -->
   </div>
 </div>
diff --git a/aio/content/examples/dynamic-component-loader/src/app/app.module.ts b/aio/content/examples/dynamic-component-loader/src/app/app.module.ts
index e642c61008..34743f20e4 100644
--- a/aio/content/examples/dynamic-component-loader/src/app/app.module.ts
+++ b/aio/content/examples/dynamic-component-loader/src/app/app.module.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
@@ -16,9 +15,7 @@ import { AdService } from './ad.service';
                   HeroJobAdComponent,
                   HeroProfileComponent,
                   AdDirective ],
-  // #docregion entry-components
   entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
-  // #enddocregion entry-components
   bootstrap: [ AppComponent ]
 })
 export class AppModule {
diff --git a/aio/content/examples/event-binding/src/app/app.component.html b/aio/content/examples/event-binding/src/app/app.component.html
index 5edc3eaee2..719e3460d9 100644
--- a/aio/content/examples/event-binding/src/app/app.component.html
+++ b/aio/content/examples/event-binding/src/app/app.component.html
@@ -2,13 +2,9 @@
 
 <div class="group">
   <h3>Target event</h3>
-  <!-- #docregion event-binding-1 -->
   <button (click)="onSave($event)">Save</button>
-  <!-- #enddocregion event-binding-1 -->
 
-  <!-- #docregion event-binding-2 -->
   <button on-click="onSave($event)">on-click Save</button>
-  <!-- #enddocregion event-binding-2 -->
 
   <!-- #docregion custom-directive -->
   <h4>myClick is an event on the custom ClickDirective:</h4>
@@ -24,9 +20,9 @@
 
   <!-- #docregion event-binding-3-->
   <input [value]="currentItem.name"
-         (input)="currentItem.name=$event.target.value" >
-  without NgModel
+         (input)="currentItem.name=getValue($event.target)">
   <!-- #enddocregion event-binding-3-->
+  without NgModel
 </div>
 
 <div class="group">
diff --git a/aio/content/examples/event-binding/src/app/app.component.ts b/aio/content/examples/event-binding/src/app/app.component.ts
index 02a1328f17..83af6bd897 100644
--- a/aio/content/examples/event-binding/src/app/app.component.ts
+++ b/aio/content/examples/event-binding/src/app/app.component.ts
@@ -11,7 +11,7 @@ export class AppComponent {
   currentItem = { name: 'teapot'} ;
   clickMessage = '';
 
-  onSave(event?: KeyboardEvent) {
+  onSave(event?: MouseEvent) {
     const evtMsg = event ? ' Event target is ' + (event.target as HTMLElement).textContent : '';
     alert('Saved.' + evtMsg);
     if (event) { event.stopPropagation(); }
@@ -21,9 +21,14 @@ export class AppComponent {
     alert(`Delete the ${item.name}.`);
   }
 
-  onClickMe(event?: KeyboardEvent) {
+  onClickMe(event?: MouseEvent) {
     const evtMsg = event ? ' Event target class is ' + (event.target as HTMLElement).className  : '';
     alert('Click me.' + evtMsg);
   }
 
+  // #docregion getValue
+  getValue(target: EventTarget): string {
+    return (target as HTMLInputElement).value;
+  }
+  // #enddocregion getValue
 }
diff --git a/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts
index 4df17d96c4..bf6476803b 100644
--- a/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts
+++ b/aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts
@@ -1,15 +1,10 @@
 // #docplaster
-// #docregion customer-dashboard
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-// #enddocregion customer-dashboard
 // #docregion customer-dashboard-component
 // import the new component
 import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
-// #enddocregion customer-dashboard-component
 
-
-// #docregion customer-dashboard-component
 @NgModule({
   imports: [
     CommonModule
@@ -28,7 +23,4 @@ import { CustomerDashboardComponent } from './customer-dashboard/customer-dashbo
 
 // #enddocregion customer-dashboard-component
 
-// #docregion customer-dashboard
 export class CustomerDashboardModule { }
-
-// #enddocregion customer-dashboard
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts
index 3a9e0f1159..8b22a21b96 100644
--- a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts
@@ -20,7 +20,6 @@ export class HeroFormReactiveComponent implements OnInit {
   heroForm: FormGroup;
 
   ngOnInit(): void {
-    // #docregion async-validation
     this.heroForm = new FormGroup({
       name: new FormControl(this.hero.name, [
         Validators.required,
@@ -33,7 +32,6 @@ export class HeroFormReactiveComponent implements OnInit {
       }),
       power: new FormControl(this.hero.power, Validators.required)
     });
-    // #enddocregion async-validation
   }
 
   get name() { return this.heroForm.get('name'); }
@@ -42,7 +40,5 @@ export class HeroFormReactiveComponent implements OnInit {
 
   get alterEgo() { return this.heroForm.get('alterEgo'); }
 
-  // #docregion async-validation
   constructor(private alterEgoValidator: UniqueAlterEgoValidator) {}
-  // #enddocregion async-validation
 }
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.css b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.css
index 8e1db2c511..b87c61c775 100644
--- a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.css
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.css
@@ -1,5 +1,3 @@
-/* #docregion cross-validation-error-css */
 .cross-validation-error input {
   border-left: 5px solid red;
 }
-/* #enddocregion cross-validation-error-css */
\ No newline at end of file
diff --git a/aio/content/examples/form-validation/src/app/shared/alter-ego.directive.ts b/aio/content/examples/form-validation/src/app/shared/alter-ego.directive.ts
index bf08aa6bd3..975545e6f3 100644
--- a/aio/content/examples/form-validation/src/app/shared/alter-ego.directive.ts
+++ b/aio/content/examples/form-validation/src/app/shared/alter-ego.directive.ts
@@ -25,7 +25,6 @@ export class UniqueAlterEgoValidator implements AsyncValidator {
 }
 // #enddocregion async-validator
 
-// #docregion async-validator-directive
 @Directive({
   selector: '[appUniqueAlterEgo]',
   providers: [
@@ -43,4 +42,3 @@ export class UniqueAlterEgoValidatorDirective {
     this.validator.validate(control);
   }
 }
-// #enddocregion async-validator-directive
diff --git a/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
index 0c4f8b18c0..60510fe6c6 100644
--- a/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
+++ b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
@@ -1,6 +1,6 @@
 // #docregion
-import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms';
+import { Directive, Input } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn } from '@angular/forms';
 
 // #docregion custom-validator
 /** A hero's name can't match the given regular expression */
@@ -22,7 +22,7 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
 export class ForbiddenValidatorDirective implements Validator {
   @Input('appForbiddenName') forbiddenName: string;
 
-  validate(control: AbstractControl): {[key: string]: any} | null {
+  validate(control: AbstractControl): ValidationErrors | null {
     return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                               : null;
   }
diff --git a/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts b/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts
index a13278295b..3c10d241a8 100644
--- a/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts
+++ b/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts
@@ -4,7 +4,7 @@ import { AbstractControl, FormGroup, NG_VALIDATORS, ValidationErrors, Validator,
 
 // #docregion cross-validation-validator
 /** A hero's name can't match the hero's alter ego */
-export const identityRevealedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
+export const identityRevealedValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
   const name = control.get('name');
   const alterEgo = control.get('alterEgo');
 
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
index 14668dcbcd..ff7dd31981 100644
--- a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
@@ -35,13 +35,11 @@
 
         <div class="form-group">
           <label for="alterEgo">Alter Ego</label>
-        <!-- #docregion async-validation -->
           <input id="alterEgo" class="form-control" name="alterEgo"
                 #alterEgo="ngModel"
                 [(ngModel)]="hero.alterEgo"
                 [ngModelOptions]="{ updateOn: 'blur' }"
                 appUniqueAlterEgo>
-        <!-- #enddocregion async-validation -->
 
           <div *ngIf="alterEgo.pending">Validating...</div>
           <div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts
index f1e88e92f6..9435d2d570 100644
--- a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts
@@ -1,9 +1,6 @@
 /* tslint:disable: member-ordering */
-// #docplaster
-// #docregion
 import { Component } from '@angular/core';
 
-// #docregion component
 @Component({
   selector: 'app-hero-form-template',
   templateUrl: './hero-form-template.component.html',
@@ -16,4 +13,3 @@ export class HeroFormTemplateComponent {
   hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
 
 }
-// #enddocregion
diff --git a/aio/content/examples/forms/src/app/hero-form/hero-form.component.html b/aio/content/examples/forms/src/app/hero-form/hero-form.component.html
index dbbc1c3908..d05b100d9b 100644
--- a/aio/content/examples/forms/src/app/hero-form/hero-form.component.html
+++ b/aio/content/examples/forms/src/app/hero-form/hero-form.component.html
@@ -102,7 +102,6 @@
 
 <!-- ====================================================  -->
 <hr>
-<!-- #docregion  phase1-->
 <style>
   .no-style .ng-valid {
   border-left: 1px  solid #CCC
@@ -113,7 +112,6 @@
 }
 </style>
 <div class="no-style" style="margin-left: 4px">
-   <!-- #docregion start -->
   <div class="container">
       <h1>Hero Form</h1>
       <form>
@@ -127,7 +125,6 @@
           <input type="text" class="form-control" id="alterEgo">
         </div>
 
-    <!-- #enddocregion start -->
         <!-- #docregion powers -->
         <div class="form-group">
           <label for="power">Hero Power</label>
@@ -137,17 +134,13 @@
         </div>
 
         <!-- #enddocregion powers -->
-    <!-- #docregion start -->
         <button type="submit" class="btn btn-success">Submit</button>
 
       </form>
   </div>
-    <!-- #enddocregion start -->
-  <!-- #enddocregion  phase1-->
 
   <!-- ====================================================  -->
   <hr>
-  <!-- #docregion phase2-->
   <div class="container">
       <h1>Hero Form</h1>
       <!-- #docregion template-variable-->
@@ -182,7 +175,6 @@
 
       </form>
   </div>
-  <!-- #enddocregion  phase2-->
 
   <!-- EXTRA MATERIAL FOR DOCUMENTATION -->
   <hr>
@@ -193,11 +185,9 @@
     TODO: remove this: {{model.name}}
   <!-- #enddocregion ngModelName-1 -->
   <hr>
-  <!-- #docregion ngModel-3-->
     <input type="text" class="form-control" id="name"
            required
            [ngModel]="model.name" name="name"
            (ngModelChange)="model.name = $event">
     TODO: remove this: {{model.name}}
-  <!-- #enddocregion ngModel-3-->
 </div>
diff --git a/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts b/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts
index c155206786..a82ecde070 100644
--- a/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts
+++ b/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts
@@ -49,9 +49,7 @@ export class HeroFormComponent {
   //   Name via form.controls = {{showFormControls(heroForm)}}
   showFormControls(form: any) {
     return form && form.controls.name &&
-    // #docregion form-controls
     form.controls.name.value; // Dr. IQ
-    // #enddocregion form-controls
   }
 
   /////////////////////////////
diff --git a/aio/content/examples/forms/src/index.html b/aio/content/examples/forms/src/index.html
index 44a5c33b05..be443ca0da 100644
--- a/aio/content/examples/forms/src/index.html
+++ b/aio/content/examples/forms/src/index.html
@@ -7,10 +7,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-     <!-- #docregion bootstrap -->
     <link rel="stylesheet"
           href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
-     <!-- #enddocregion bootstrap -->
      <!-- #docregion styles -->
     <link rel="stylesheet" href="assets/forms.css">
     <!-- #enddocregion styles -->
diff --git a/aio/content/examples/getting-started-v0/src/app/app.component.css b/aio/content/examples/getting-started-v0/src/app/app.component.css
index b7ef084c56..8b13789179 100644
--- a/aio/content/examples/getting-started-v0/src/app/app.component.css
+++ b/aio/content/examples/getting-started-v0/src/app/app.component.css
@@ -1,3 +1 @@
-p {
-  font-family: Lato;
-}
\ No newline at end of file
+
diff --git a/aio/content/examples/getting-started-v0/src/app/app.component.ts b/aio/content/examples/getting-started-v0/src/app/app.component.ts
index e98ec2a712..68478a8623 100644
--- a/aio/content/examples/getting-started-v0/src/app/app.component.ts
+++ b/aio/content/examples/getting-started-v0/src/app/app.component.ts
@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
+  styleUrls: ['./app.component.css']
 })
-export class AppComponent  {}
+export class AppComponent {
+}
diff --git a/aio/content/examples/getting-started-v0/src/app/app.module.ts b/aio/content/examples/getting-started-v0/src/app/app.module.ts
index 1dbba86431..c9fa322589 100644
--- a/aio/content/examples/getting-started-v0/src/app/app.module.ts
+++ b/aio/content/examples/getting-started-v0/src/app/app.module.ts
@@ -20,6 +20,8 @@ import { ProductListComponent } from './product-list/product-list.component';
     TopBarComponent,
     ProductListComponent
   ],
-  bootstrap: [ AppComponent ]
+  bootstrap: [
+    AppComponent
+  ]
 })
 export class AppModule { }
diff --git a/aio/content/examples/getting-started-v0/src/app/products.ts b/aio/content/examples/getting-started-v0/src/app/products.ts
index da94ebbdea..ebcde04caa 100644
--- a/aio/content/examples/getting-started-v0/src/app/products.ts
+++ b/aio/content/examples/getting-started-v0/src/app/products.ts
@@ -1,15 +1,18 @@
 export const products = [
   {
+    id: 1,
     name: 'Phone XL',
     price: 799,
     description: 'A large phone with one of the best screens'
   },
   {
+    id: 2,
     name: 'Phone Mini',
     price: 699,
     description: 'A great phone with one of the best cameras'
   },
   {
+    id: 3,
     name: 'Phone Standard',
     price: 299,
     description: ''
diff --git a/aio/content/examples/getting-started-v0/src/app/top-bar/top-bar.component.ts b/aio/content/examples/getting-started-v0/src/app/top-bar/top-bar.component.ts
index e531b08799..12fe8c9488 100644
--- a/aio/content/examples/getting-started-v0/src/app/top-bar/top-bar.component.ts
+++ b/aio/content/examples/getting-started-v0/src/app/top-bar/top-bar.component.ts
@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-top-bar',
   templateUrl: './top-bar.component.html',
   styleUrls: ['./top-bar.component.css']
 })
-export class TopBarComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
+export class TopBarComponent {
 
 }
diff --git a/aio/content/examples/getting-started-v0/src/main.ts b/aio/content/examples/getting-started-v0/src/main.ts
index 61c5f24eca..c7b673cf44 100644
--- a/aio/content/examples/getting-started-v0/src/main.ts
+++ b/aio/content/examples/getting-started-v0/src/main.ts
@@ -1,11 +1,12 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { environment } from './environments/environment';
 
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
diff --git a/aio/content/examples/getting-started/src/app/cart.service.1.ts b/aio/content/examples/getting-started/src/app/cart.service.1.ts
index 40d52da108..e0de77428f 100644
--- a/aio/content/examples/getting-started/src/app/cart.service.1.ts
+++ b/aio/content/examples/getting-started/src/app/cart.service.1.ts
@@ -1,8 +1,5 @@
-// #docplaster
-// #docregion
 import { Injectable } from '@angular/core';
 
-// #docregion v1
 @Injectable({
   providedIn: 'root'
 })
diff --git a/aio/content/examples/getting-started/src/app/cart.service.ts b/aio/content/examples/getting-started/src/app/cart.service.ts
index b28b22f351..999a13d8b8 100644
--- a/aio/content/examples/getting-started/src/app/cart.service.ts
+++ b/aio/content/examples/getting-started/src/app/cart.service.ts
@@ -1,14 +1,15 @@
 // #docplaster
 // #docregion import-http
 import { Injectable } from '@angular/core';
-
 import { HttpClient } from '@angular/common/http';
 // #enddocregion import-http
+
 @Injectable({
   providedIn: 'root'
 })
 // #docregion props, methods, inject-http, get-shipping
 export class CartService {
+// #enddocregion get-shipping
   items = [];
 // #enddocregion props, methods
 
@@ -32,8 +33,10 @@ export class CartService {
   }
 // #enddocregion methods
 
+// #docregion get-shipping
   getShippingPrices() {
-    return this.http.get('/assets/shipping.json');
+    return this.http.get<{type: string, price: number}[]>('/assets/shipping.json');
   }
 // #docregion props, methods, inject-http
 }
+// #enddocregion props, methods, inject-http
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.1.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.1.ts
index c9276d4d36..f66cc6c971 100644
--- a/aio/content/examples/getting-started/src/app/cart/cart.component.1.ts
+++ b/aio/content/examples/getting-started/src/app/cart/cart.component.1.ts
@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-cart',
   templateUrl: './cart.component.html',
   styleUrls: ['./cart.component.css']
 })
-export class CartComponent implements OnInit {
+export class CartComponent {
 
   constructor() { }
 
-  ngOnInit() {
-  }
-
 }
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.2.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.2.ts
index 8615c5a391..0d346af466 100644
--- a/aio/content/examples/getting-started/src/app/cart/cart.component.2.ts
+++ b/aio/content/examples/getting-started/src/app/cart/cart.component.2.ts
@@ -9,10 +9,10 @@ import { CartService } from '../cart.service';
   templateUrl: './cart.component.html',
   styleUrls: ['./cart.component.css']
 })
-// #docregion inject-cart, items, submit
+// #docregion inject-cart, items
 export class CartComponent {
 // #enddocregion inject-cart
-  items;
+  items = this.cartService.getItems();
 // #docregion inject-cart
 
   constructor(
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts
index fc44540f4d..2236cf39e8 100644
--- a/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts
+++ b/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts
@@ -1,15 +1,11 @@
-// #docplaster
-// #docregion imports
 import { Component, OnInit } from '@angular/core';
 import { CartService } from '../cart.service';
-// #enddocregion imports
 
 @Component({
   selector: 'app-cart',
   templateUrl: './cart.component.html',
   styleUrls: ['./cart.component.css']
 })
-// #docregion props-services, submit
 export class CartComponent implements OnInit {
   items;
 
@@ -17,7 +13,7 @@ export class CartComponent implements OnInit {
     private cartService: CartService
   ) { }
 
-  ngOnInit() {
+  ngOnInit(): void  {
     this.items = this.cartService.getItems();
   }
 }
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.html b/aio/content/examples/getting-started/src/app/cart/cart.component.html
index b2b825c694..7fa7ccc8a5 100644
--- a/aio/content/examples/getting-started/src/app/cart/cart.component.html
+++ b/aio/content/examples/getting-started/src/app/cart/cart.component.html
@@ -12,7 +12,7 @@
 </div>
 
 <!-- #docregion checkout-form-1 -->
-<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
+<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
 <!-- #enddocregion checkout-form-1 -->
 
   <div>
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.ts
index a076868145..a2ebf9c762 100644
--- a/aio/content/examples/getting-started/src/app/cart/cart.component.ts
+++ b/aio/content/examples/getting-started/src/app/cart/cart.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 
 import { CartService } from '../cart.service';
@@ -11,38 +11,26 @@ import { CartService } from '../cart.service';
   templateUrl: './cart.component.html',
   styleUrls: ['./cart.component.css']
 })
-// #docregion props-services, submit, inject-form-builder, checkout-form, checkout-form-group
-export class CartComponent implements OnInit {
-  items;
-// #enddocregion inject-form-builder
-  checkoutForm;
-// #enddocregion checkout-form
+// #docregion inject-form-builder, checkout-form-group
+export class CartComponent {
+  // #enddocregion inject-form-builder
+  items = this.cartService.getItems();
+  checkoutForm = this.formBuilder.group({
+    name: '',
+    address: ''
+  });
 // #docregion inject-form-builder
-
   constructor(
     private cartService: CartService,
     private formBuilder: FormBuilder,
-  ) {
-// #enddocregion inject-form-builder
-    this.checkoutForm = this.formBuilder.group({
-      name: '',
-      address: ''
-    });
-// #docregion inject-form-builder
-  }
-
-  ngOnInit() {
-    this.items = this.cartService.getItems();
-  }
+    ) {}
 // #enddocregion inject-form-builder, checkout-form-group
 
-  // #enddocregion props-services
-  onSubmit(customerData) {
+  onSubmit(): void {
     // Process checkout data here
     this.items = this.cartService.clearCart();
+    console.warn('Your order has been submitted', this.checkoutForm.value);
     this.checkoutForm.reset();
-
-    console.warn('Your order has been submitted', customerData);
   }
-// #docregion props-services, inject-form-builder, checkout-form, checkout-form-group
+// #docregion inject-form-builder, checkout-form-group
 }
diff --git a/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts b/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts
index ec22944f7d..d598b3d389 100644
--- a/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts
+++ b/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts
@@ -11,9 +11,10 @@ import { products } from '../products';
   templateUrl: './product-details.component.html',
   styleUrls: ['./product-details.component.css']
 })
-// #docregion props-methods, add-to-cart
+// #docregion props-methods, product-prop
 export class ProductDetailsComponent implements OnInit {
   product;
+  // #enddocregion product-prop
 
   constructor(
     private route: ActivatedRoute,
@@ -22,10 +23,15 @@ export class ProductDetailsComponent implements OnInit {
   // #enddocregion props-methods
   // #docregion get-product
   ngOnInit() {
-    this.route.paramMap.subscribe(params => {
-      this.product = products[+params.get('productId')];
-    });
+    // First get the product id from the current route.
+    const routeParams = this.route.snapshot.paramMap;
+    const productIdFromRoute = Number(routeParams.get('productId'));
+
+    // Find the product that correspond with the id provided in route.
+    this.product = products.find(product => product.id === productIdFromRoute);
   }
   // #enddocregion get-product
+  // #docregion product-prop
+  /* ... */
   // #docregion props-methods
 }
diff --git a/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts b/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
index f3731e7e65..4d28fcd615 100644
--- a/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
+++ b/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
@@ -1,10 +1,9 @@
 // #docplaster
-// #docregion imports, cart-service
+// #docregion cart-service
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { products } from '../products';
-// #enddocregion imports
 import { CartService } from '../cart.service';
 // #enddocregion cart-service
 
@@ -13,34 +12,31 @@ import { CartService } from '../cart.service';
   templateUrl: './product-details.component.html',
   styleUrls: ['./product-details.component.css']
 })
-// #docregion props-methods, get-product, inject-cart-service, add-to-cart
+// #docregion inject-cart-service, add-to-cart
 export class ProductDetailsComponent implements OnInit {
-// #enddocregion add-to-cart, get-product, inject-cart-service
+// #enddocregion add-to-cart, inject-cart-service
   product;
 
 // #docregion inject-cart-service
   constructor(
     private route: ActivatedRoute,
-// #enddocregion props-methods
     private cartService: CartService
-// #docregion props-methods
   ) { }
 // #enddocregion inject-cart-service
 
-// #docregion get-product
   ngOnInit() {
-// #enddocregion props-methods
-    this.route.paramMap.subscribe(params => {
-      this.product = products[+params.get('productId')];
-    });
-// #docregion props-methods
+    // First get the product id from the current route.
+    const routeParams = this.route.snapshot.paramMap;
+    const productIdFromRoute = Number(routeParams.get('productId'));
+
+    // Find the product that correspond with the id provided in route.
+    this.product = products.find(product => product.id === productIdFromRoute);
   }
 
-// #enddocregion props-methods, get-product
 // #docregion add-to-cart
   addToCart(product) {
     this.cartService.addToCart(product);
     window.alert('Your product has been added to the cart!');
   }
-// #docregion props-methods, get-product, inject-cart-service
+// #docregion inject-cart-service
 }
diff --git a/aio/content/examples/getting-started/src/app/product-list/product-list.component.5.html b/aio/content/examples/getting-started/src/app/product-list/product-list.component.5.html
index 131c58543e..c8e6395f01 100644
--- a/aio/content/examples/getting-started/src/app/product-list/product-list.component.5.html
+++ b/aio/content/examples/getting-started/src/app/product-list/product-list.component.5.html
@@ -2,13 +2,11 @@
 
 <div *ngFor="let product of products">
 
-<!-- #docregion product-details -->
   <h3>
     <a [title]="product.name + ' details'">
       {{ product.name }}
     </a>
   </h3>
-<!-- #enddocregion product-details -->
 
   <p *ngIf="product.description">
     Description: {{ product.description }}
diff --git a/aio/content/examples/getting-started/src/app/product-list/product-list.component.html b/aio/content/examples/getting-started/src/app/product-list/product-list.component.html
index f1b86df848..2342c4bc9c 100644
--- a/aio/content/examples/getting-started/src/app/product-list/product-list.component.html
+++ b/aio/content/examples/getting-started/src/app/product-list/product-list.component.html
@@ -1,26 +1,28 @@
 <h2>Products</h2>
 
 <!-- #docregion router-link -->
-<div *ngFor="let product of products; index as productId">
+<div *ngFor="let product of products">
 
   <h3>
-    <a [title]="product.name + ' details'" [routerLink]="['/products', productId]">
+    <a [title]="product.name + ' details'" [routerLink]="['/products', product.id]">
       {{ product.name }}
     </a>
   </h3>
-<!-- #enddocregion router-link -->  
+
+  <!-- #enddocregion router-link -->
   <p *ngIf="product.description">
     Description: {{ product.description }}
   </p>
-  
+
   <button (click)="share()">
     Share
   </button>
-  
+
   <app-product-alerts
     [product]="product"
     (notify)="onNotify()">
   </app-product-alerts>
-<!-- #docregion router-link -->
+  <!-- #docregion router-link -->
+
 </div>
 <!-- #enddocregion router-link -->
diff --git a/aio/content/examples/getting-started/src/app/products.ts b/aio/content/examples/getting-started/src/app/products.ts
index da94ebbdea..ebcde04caa 100644
--- a/aio/content/examples/getting-started/src/app/products.ts
+++ b/aio/content/examples/getting-started/src/app/products.ts
@@ -1,15 +1,18 @@
 export const products = [
   {
+    id: 1,
     name: 'Phone XL',
     price: 799,
     description: 'A large phone with one of the best screens'
   },
   {
+    id: 2,
     name: 'Phone Mini',
     price: 699,
     description: 'A great phone with one of the best cameras'
   },
   {
+    id: 3,
     name: 'Phone Standard',
     price: 299,
     description: ''
diff --git a/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts b/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts
index 3bbacae6bd..fc3763e925 100644
--- a/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts
+++ b/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts
@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-shipping',
   templateUrl: './shipping.component.html',
   styleUrls: ['./shipping.component.css']
 })
-export class ShippingComponent implements OnInit {
+export class ShippingComponent {
 
   constructor() { }
 
-  ngOnInit() {
-  }
-
 }
diff --git a/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts b/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts
index 95a58b6f1b..da2c02a9d8 100644
--- a/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts
+++ b/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { CartService } from '../cart.service';
 // #enddocregion
@@ -10,21 +10,18 @@ import { CartService } from '../cart.service';
   templateUrl: './shipping.component.html',
   styleUrls: ['./shipping.component.css']
 })
-// #docregion props, ctor
-export class ShippingComponent implements OnInit {
-  shippingCosts;
+// #docregion props
+export class ShippingComponent {
+  shippingCosts = this.cartService.getShippingPrices();
 // #enddocregion props
 
+
+
 // #docregion inject-cart-service
-  constructor(
-    private cartService: CartService
-  ) {
+  constructor(private cartService: CartService) {
   }
 // #enddocregion inject-cart-service
 
-  ngOnInit() {
-    this.shippingCosts = this.cartService.getShippingPrices();
-  }
 
 // #docregion props
 }
diff --git a/aio/content/examples/http/e2e/src/app.e2e-spec.ts b/aio/content/examples/http/e2e/src/app.e2e-spec.ts
index 41a4c2e3c7..f69efa6b73 100644
--- a/aio/content/examples/http/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/http/e2e/src/app.e2e-spec.ts
@@ -29,6 +29,26 @@ const checkLogForMessage = async (message: string) => {
 };
 
 describe('Http Tests', () => {
+  // It seems that currently Chrome/ChromeDriver fail to click a button that is just outside the
+  // viewport (or maybe only partially inside the viewport) - at least in headless mode.
+  // Possible solutions:
+  // 1. Click the element via JavaScript (with something like
+  //    `browser.executeScript('arguments[0].click', elem)`).
+  // 2. Manually scroll the element into view before clicking:
+  //    https://stackoverflow.com/questions/47776774/element-is-not-clickable-at-point-in-headless-mode-but-when-we-remove-headless
+  // 3. Explicitly set the window size to a bigger size:
+  //    https://stackoverflow.com/questions/62003082/elementnotinteractableexception-element-not-interactable-element-has-zero-size
+  //
+  // Since the default 800x600 window size in headless mode (as used on CI) causes the
+  // `<app-config>` buttons to be in a position that trigger the above issue, we explicitly set the
+  // window size to 1920x1080 when in headless mode.
+  beforeAll(async () => {
+    const config = await browser.getProcessedConfig();
+    if (config.capabilities?.chromeOptions?.args?.includes('--headless')) {
+      browser.driver.manage().window().setSize(1920, 1080);
+    }
+  });
+
   beforeEach(() => browser.get(''));
 
   describe('Heroes', () => {
@@ -66,6 +86,7 @@ describe('Http Tests', () => {
       await checkLogForMessage('GET "assets/config.json"');
       expect(await page.configSpan.getText()).toContain('Heroes API URL is "api/heroes"');
       expect(await page.configSpan.getText()).toContain('Textfile URL is "assets/textfile.txt"');
+      expect(await page.configSpan.getText()).toContain('Date is "Wed Jan 29 2020" (date)');
     });
 
     it('can fetch the configuration JSON file with headers', async () => {
diff --git a/aio/content/examples/http/src/app/config/config.component.html b/aio/content/examples/http/src/app/config/config.component.html
index e17e9bc109..8c2416e39e 100644
--- a/aio/content/examples/http/src/app/config/config.component.html
+++ b/aio/content/examples/http/src/app/config/config.component.html
@@ -7,6 +7,7 @@
   <span *ngIf="config">
     <p>Heroes API URL is "{{config.heroesUrl}}"</p>
     <p>Textfile URL is "{{config.textfile}}"</p>
+    <p>Date is "{{config.date.toDateString()}}" ({{getType(config.date)}})</p>
     <div *ngIf="headers">
       Response headers:
       <ul>
diff --git a/aio/content/examples/http/src/app/config/config.component.ts b/aio/content/examples/http/src/app/config/config.component.ts
index 39a847ffbb..c78efe8490 100644
--- a/aio/content/examples/http/src/app/config/config.component.ts
+++ b/aio/content/examples/http/src/app/config/config.component.ts
@@ -2,7 +2,6 @@
 // #docregion
 import { Component } from '@angular/core';
 import { Config, ConfigService } from './config.service';
-import { MessageService } from '../message.service';
 
 @Component({
   selector: 'app-config',
@@ -25,7 +24,7 @@ export class ConfigComponent {
     this.headers = undefined;
   }
 
-  // #docregion v1, v2, v3
+  // #docregion v1, v2
   showConfig() {
     this.configService.getConfig()
   // #enddocregion v1, v2
@@ -34,25 +33,23 @@ export class ConfigComponent {
         error => this.error = error // error path
       );
   }
-  // #enddocregion v3
 
   showConfig_v1() {
     this.configService.getConfig_1()
-  // #docregion v1, v1_callback
+  // #docregion v1
       .subscribe((data: Config) => this.config = {
           heroesUrl: data.heroesUrl,
-          textfile:  data.textfile
+          textfile:  data.textfile,
+          date: data.date,
       });
-  // #enddocregion v1_callback
   }
   // #enddocregion v1
 
   showConfig_v2() {
     this.configService.getConfig()
-  // #docregion v2, v2_callback
+  // #docregion v2
       // clone the data object, using its known Config shape
       .subscribe((data: Config) => this.config = { ...data });
-  // #enddocregion v2_callback
   }
   // #enddocregion v2
 
@@ -74,5 +71,9 @@ export class ConfigComponent {
   makeError() {
     this.configService.makeIntentionalError().subscribe(null, error => this.error = error );
   }
+
+  getType(val: any): string {
+    return val instanceof Date ? 'date' : Array.isArray(val) ? 'array' : typeof val;
+  }
 }
 // #enddocregion
diff --git a/aio/content/examples/http/src/app/config/config.service.ts b/aio/content/examples/http/src/app/config/config.service.ts
index e41c24f39c..7d81ef7281 100644
--- a/aio/content/examples/http/src/app/config/config.service.ts
+++ b/aio/content/examples/http/src/app/config/config.service.ts
@@ -14,6 +14,7 @@ import { catchError, retry } from 'rxjs/operators';
 export interface Config {
   heroesUrl: string;
   textfile: string;
+  date: any;
 }
 // #enddocregion config-interface
 // #docregion proto
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.css b/aio/content/examples/http/src/app/heroes/heroes.component.css
index 89a07c17bf..c2f101fabf 100644
--- a/aio/content/examples/http/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.css
@@ -57,8 +57,7 @@
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.html b/aio/content/examples/http/src/app/heroes/heroes.component.html
index 4bb3597a71..42d42e4d8f 100644
--- a/aio/content/examples/http/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.html
@@ -1,5 +1,4 @@
 <h3>Heroes</h3>
-<!-- #docregion add -->
 <div>
   <label>Hero name:
     <input #heroName />
@@ -12,9 +11,7 @@
     search
   </button>
 </div>
-<!-- #enddocregion add -->
 
-<!-- #docregion list -->
 <ul class="heroes">
   <li *ngFor="let hero of heroes">
     <a (click)="edit(hero)">
@@ -23,10 +20,7 @@
       <input *ngIf="hero===editHero" [(ngModel)]="hero.name"
         (blur)="update()" (keyup.enter)="update()">
     </a>
-    <!-- #docregion delete -->
     <button class="delete" title="delete hero"
     (click)="delete(hero)">x</button>
-    <!-- #enddocregion delete -->
   </li>
 </ul>
-<!-- #enddocregion list -->
diff --git a/aio/content/examples/http/src/app/http-interceptors/index.ts b/aio/content/examples/http/src/app/http-interceptors/index.ts
index a44f18f5f9..6a1a7450bc 100644
--- a/aio/content/examples/http/src/app/http-interceptors/index.ts
+++ b/aio/content/examples/http/src/app/http-interceptors/index.ts
@@ -6,6 +6,7 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
 // #enddocregion interceptor-providers
 import { AuthInterceptor } from './auth-interceptor';
 import { CachingInterceptor } from './caching-interceptor';
+import { CustomJsonInterceptor , CustomJsonParser, JsonParser} from './custom-json-interceptor';
 import { EnsureHttpsInterceptor } from './ensure-https-interceptor';
 import { LoggingInterceptor } from './logging-interceptor';
 // #docregion interceptor-providers
@@ -21,6 +22,10 @@ export const httpInterceptorProviders = [
   // #docregion noop-provider
   { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },
   // #enddocregion noop-provider, interceptor-providers
+  // #docregion custom-json-interceptor
+  { provide: HTTP_INTERCEPTORS, useClass: CustomJsonInterceptor, multi: true },
+  { provide: JsonParser, useClass: CustomJsonParser },
+  // #enddocregion custom-json-interceptor
 
   { provide: HTTP_INTERCEPTORS, useClass: EnsureHttpsInterceptor, multi: true },
   { provide: HTTP_INTERCEPTORS, useClass: TrimNameInterceptor, multi: true },
diff --git a/aio/content/examples/http/src/app/package-search/package-search.component.html b/aio/content/examples/http/src/app/package-search/package-search.component.html
index b1bd56d561..bac14b8cdd 100644
--- a/aio/content/examples/http/src/app/package-search/package-search.component.html
+++ b/aio/content/examples/http/src/app/package-search/package-search.component.html
@@ -2,7 +2,7 @@
 <h3>Search Npm Packages</h3>
 <p><i>Searches when typing stops. Caches for 30 seconds.</i></p>
 <!-- #docregion search -->
-<input (keyup)="search($event.target.value)" id="name" placeholder="Search"/>
+<input (keyup)="search(getValue($event.target))" id="name" placeholder="Search"/>
 <!-- #enddocregion search -->
 <input type="checkbox" id="refresh" [checked]="withRefresh" (click)="toggleRefresh()">
 <label for="refresh">with refresh</label>
diff --git a/aio/content/examples/http/src/app/package-search/package-search.component.ts b/aio/content/examples/http/src/app/package-search/package-search.component.ts
index f020da50c2..ec7df8282e 100644
--- a/aio/content/examples/http/src/app/package-search/package-search.component.ts
+++ b/aio/content/examples/http/src/app/package-search/package-search.component.ts
@@ -35,4 +35,9 @@ export class PackageSearchComponent implements OnInit {
 
   toggleRefresh() { this.withRefresh = ! this.withRefresh; }
 
+  // #docregion getValue
+  getValue(target: EventTarget): string {
+    return (target as HTMLInputElement).value;
+  }
+  // #enddocregion getValue
 }
diff --git a/aio/content/examples/http/src/app/request-cache.service.ts b/aio/content/examples/http/src/app/request-cache.service.ts
index 9e3fbc83b5..54c02b75bb 100644
--- a/aio/content/examples/http/src/app/request-cache.service.ts
+++ b/aio/content/examples/http/src/app/request-cache.service.ts
@@ -9,12 +9,10 @@ export interface RequestCacheEntry {
   lastRead: number;
 }
 
-// #docregion request-cache
 export abstract class RequestCache {
   abstract get(req: HttpRequest<any>): HttpResponse<any> | undefined;
   abstract put(req: HttpRequest<any>, response: HttpResponse<any>): void;
 }
-// #enddocregion request-cache
 
 const maxAge = 30000; // maximum cache age (ms)
 
diff --git a/aio/content/examples/http/src/assets/config.json b/aio/content/examples/http/src/assets/config.json
index a6f2505140..b5f75452ce 100644
--- a/aio/content/examples/http/src/assets/config.json
+++ b/aio/content/examples/http/src/assets/config.json
@@ -1,4 +1,5 @@
 {
   "heroesUrl": "api/heroes",
-  "textfile": "assets/textfile.txt"
+  "textfile": "assets/textfile.txt",
+  "date": "2020-01-29"
 }
diff --git a/aio/content/examples/http/src/main-specs.ts b/aio/content/examples/http/src/main-specs.ts
index e1ab261f4c..0190a64610 100644
--- a/aio/content/examples/http/src/main-specs.ts
+++ b/aio/content/examples/http/src/main-specs.ts
@@ -6,7 +6,7 @@ declare var jasmine;
 
 import './polyfills';
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 
 import { getTestBed } from '@angular/core/testing';
 import {
diff --git a/aio/content/examples/i18n/doc-files/app.locale_data.ts b/aio/content/examples/i18n/doc-files/app.locale_data.ts
index 6e77ea039f..3c99a59e09 100644
--- a/aio/content/examples/i18n/doc-files/app.locale_data.ts
+++ b/aio/content/examples/i18n/doc-files/app.locale_data.ts
@@ -1,7 +1,5 @@
-// #docregion import-locale
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
 
 // the second parameter 'fr-FR' is optional
 registerLocaleData(localeFr, 'fr-FR');
-// #enddocregion import-locale
diff --git a/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts b/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts
index 05b7b80d53..f31ce034bb 100644
--- a/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts
+++ b/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts
@@ -1,7 +1,5 @@
-// #docregion import-locale-extra
 import { registerLocaleData } from '@angular/common';
-import localeFr from '@angular/common/locales/fr';
 import localeFrExtra from '@angular/common/locales/extra/fr';
+import localeFr from '@angular/common/locales/fr';
 
 registerLocaleData(localeFr, 'fr-FR', localeFrExtra);
-// #enddocregion import-locale-extra
diff --git a/aio/content/examples/i18n/src/app/app.component.html b/aio/content/examples/i18n/src/app/app.component.html
index b9512dfc00..f7b68a9f76 100644
--- a/aio/content/examples/i18n/src/app/app.component.html
+++ b/aio/content/examples/i18n/src/app/app.component.html
@@ -1,9 +1,7 @@
 <!--#docregion-->
-<!--#docregion i18n-attribute-meaning-->
 <h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">
   Hello i18n!
 </h1>
-<!--#enddocregion i18n-attribute-meaning-->
 
 <!--#docregion i18n-ng-container-->
 <ng-container i18n>I don't output any element</ng-container>
diff --git a/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts b/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts
index c150bcc214..3d15fd1bc9 100644
--- a/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts
+++ b/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts
@@ -5,12 +5,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   selector: 'app-aliasing',
   templateUrl: './aliasing.component.html',
   styleUrls: ['./aliasing.component.css'],
-  // #docregion alias
   // tslint:disable: no-inputs-metadata-property no-outputs-metadata-property
   inputs: ['input1: saveForLaterItem'], // propertyName:alias
   outputs: ['outputEvent1: saveForLaterEvent']
   // tslint:disable: no-inputs-metadata-property no-outputs-metadata-property
-  // #enddocregion alias
 
 })
 export class AliasingComponent {
@@ -18,10 +16,8 @@ export class AliasingComponent {
   input1: string;
   outputEvent1: EventEmitter<string> = new EventEmitter<string>();
 
-  // #docregion alias-input-output
   @Input('wishListItem') input2: string; //  @Input(alias)
   @Output('wishEvent') outputEvent2 = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
-  // #enddocregion alias-input-output
 
 
   saveIt() {
diff --git a/aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts b/aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts
index 465add0eca..1179589a69 100644
--- a/aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts
+++ b/aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts
@@ -1,18 +1,16 @@
 /* tslint:disable:use-input-property-decorator */
 /* tslint:disable:use-output-property-decorator */
 
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-in-the-metadata',
   templateUrl: './in-the-metadata.component.html',
   styleUrls: ['./in-the-metadata.component.css'],
-  // #docregion metadata
   // tslint:disable: no-inputs-metadata-property no-outputs-metadata-property
   inputs: ['clearanceItem'],
   outputs: ['buyEvent']
   // tslint:enable: no-inputs-metadata-property no-outputs-metadata-property
-  // #enddocregion metadata
 
 })
 export class InTheMetadataComponent  {
diff --git a/aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts b/aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts
index f328ab8614..b8dfdacb58 100644
--- a/aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts
+++ b/aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts
@@ -6,20 +6,14 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   styleUrls: ['./input-output.component.css']
 })
 export class InputOutputComponent {
-// #docregion input-output
   @Input() item: string;
-// #docregion output
   @Output() deleteRequest = new EventEmitter<string>();
-// #enddocregion output
-// #enddocregion input-output
 
   lineThrough = '';
 
-  // #docregion delete-method
   delete() {
     console.warn('Child says: emiting item deleteRequest with', this.item);
     this.deleteRequest.emit(this.item);
     this.lineThrough = this.lineThrough ? '' : 'line-through';
   }
-  // #enddocregion delete-method
 }
diff --git a/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.ts b/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.ts
index 68bbc6e584..1fa6c55141 100644
--- a/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.ts
+++ b/aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.ts
@@ -1,6 +1,4 @@
-// #docregion imports
 import { Component, Output, EventEmitter } from '@angular/core';
-// #enddocregion imports
 
 @Component({
   selector: 'app-item-output',
diff --git a/aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts b/aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts
index d12b2c47f3..a2ce3747e7 100644
--- a/aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts
@@ -40,6 +40,6 @@ describe('Interpolation e2e tests', () => {
     const label = element(by.css('label'));
     expect(await label.getText()).toEqual('Type something:');
     await input.sendKeys('abc');
-    expect(await label.getText()).toEqual('Type something: abc');
+    expect(await label.getText()).toMatch(/^Type something:\s+abc$/);
   });
 });
diff --git a/aio/content/examples/interpolation/src/app/app.component.css b/aio/content/examples/interpolation/src/app/app.component.css
index e69de29bb2..0a5e9c8845 100644
--- a/aio/content/examples/interpolation/src/app/app.component.css
+++ b/aio/content/examples/interpolation/src/app/app.component.css
@@ -0,0 +1,8 @@
+div {
+  max-width: 600px;
+  margin: auto;
+}
+
+img {
+  max-width: 200px;
+}
diff --git a/aio/content/examples/interpolation/src/app/app.component.ts b/aio/content/examples/interpolation/src/app/app.component.ts
index 1fffef735a..686581e096 100644
--- a/aio/content/examples/interpolation/src/app/app.component.ts
+++ b/aio/content/examples/interpolation/src/app/app.component.ts
@@ -9,8 +9,10 @@ import { CUSTOMERS } from './customers';
 })
 export class AppComponent {
   customers = CUSTOMERS;
-
+  // #docregion customer
   currentCustomer = 'Maria';
+  // #enddocregion customer
+
   title = 'Featured product:';
   itemImageUrl = '../assets/potted-plant.png';
 
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts
index e8a873cfc9..06ddc0c8d6 100644
--- a/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts
@@ -1,5 +1,4 @@
 // #docplaster
-// #docregion app-routing-module
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
@@ -33,4 +32,3 @@ const routes: Routes = [
   providers: []
 })
 export class AppRoutingModule { }
-// #enddocregion app-routing-module
diff --git a/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts
index 8bf2520341..c69dbd0d29 100644
--- a/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts
+++ b/aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts
@@ -1,5 +1,4 @@
 // #docplaster
-// #docregion orders-routing-module
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
@@ -19,4 +18,3 @@ const routes: Routes = [
   exports: [RouterModule]
 })
 export class OrdersRoutingModule { }
-// #enddocregion orders-routing-module
diff --git a/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
index 1de8a84612..6e25e24a52 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
@@ -2,18 +2,9 @@
 // #docregion
 import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core';
 
+import { ChildComponent } from './child.component';
 import { LoggerService } from './logger.service';
 
-//////////////////
-@Component({
-  selector: 'app-child',
-  template: '<input [(ngModel)]="hero">'
-})
-export class ChildComponent {
-  hero = 'Magneta';
-}
-
-//////////////////////
 @Component({
   selector: 'after-content',
 // #docregion template
@@ -59,7 +50,6 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
     }
   }
 // #enddocregion hooks
-// #docregion do-something
 
   // This surrogate for real business logic sets the `comment`
   private doSomething() {
@@ -75,40 +65,3 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
   // ...
 }
 // #enddocregion hooks
-
-//////////////
-@Component({
-  selector: 'after-content-parent',
-  template: `
-  <div class="parent">
-    <h2>AfterContent</h2>
-
-    <div *ngIf="show">` +
-// #docregion parent-template
-     `<after-content>
-        <app-child></app-child>
-      </after-content>`
-// #enddocregion parent-template
-+ `</div>
-
-    <h4>-- AfterContent Logs --</h4>
-    <p><button (click)="reset()">Reset</button></p>
-    <div *ngFor="let msg of logger.logs">{{msg}}</div>
-  </div>
-  `,
-  styles: ['.parent {background: burlywood}'],
-  providers: [LoggerService]
-})
-export class AfterContentParentComponent {
-  show = true;
-
-  constructor(public logger: LoggerService) {
-  }
-
-  reset() {
-    this.logger.clear();
-    // quickly remove and reload AfterContentComponent which recreates it
-    this.show = false;
-    this.logger.tick_then(() => this.show = true);
-  }
-}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
index 534d0b4090..7c25a513b5 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
@@ -2,20 +2,9 @@
 // #docregion
 import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core';
 
+import { ChildViewComponent } from './child-view.component';
 import { LoggerService } from './logger.service';
 
-//////////////////
-// #docregion child-view
-@Component({
-  selector: 'app-child-view',
-  template: '<input [(ngModel)]="hero">'
-})
-export class ChildViewComponent {
-  hero = 'Magneta';
-}
-// #enddocregion child-view
-
-//////////////////////
 @Component({
   selector: 'after-view',
 // #docregion template
@@ -84,34 +73,3 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
   // ...
 }
 // #enddocregion hooks
-
-//////////////
-@Component({
-  selector: 'after-view-parent',
-  template: `
-  <div class="parent">
-    <h2>AfterView</h2>
-
-    <after-view  *ngIf="show"></after-view>
-
-    <h4>-- AfterView Logs --</h4>
-    <p><button (click)="reset()">Reset</button></p>
-    <div *ngFor="let msg of logger.logs">{{msg}}</div>
-  </div>
-  `,
-  styles: ['.parent {background: burlywood}'],
-  providers: [LoggerService]
-})
-export class AfterViewParentComponent {
-  show = true;
-
-  constructor(public logger: LoggerService) {
-  }
-
-  reset() {
-    this.logger.clear();
-    // quickly remove and reload AfterViewComponent which recreates it
-    this.show = false;
-    this.logger.tick_then(() => this.show = true);
-  }
-}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/app.component.html b/aio/content/examples/lifecycle-hooks/src/app/app.component.html
index d0692e28ac..0dc9abbbec 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/app.component.html
+++ b/aio/content/examples/lifecycle-hooks/src/app/app.component.html
@@ -1,11 +1,11 @@
 <a id="top"></a>
 <h1>Component Lifecycle Hooks</h1>
 <a href="#hooks">Peek-a-boo: (most) lifecycle hooks</a><br>
+<a href="#spy">Spy: directive with OnInit & OnDestroy</a><br>
 <a href="#onchanges">OnChanges</a><br>
 <a href="#docheck">DoCheck</a><br>
 <a href="#after-view">AfterViewInit & AfterViewChecked</a><br>
 <a href="#after-content">AfterContentInit & AfterContentChecked</a><br>
-<a href="#spy">Spy: directive with OnInit & OnDestroy</a><br>
 <a href="#counter">Counter: OnChanges + Spy directive</a><br>
 
 <a id="hooks"></a>
diff --git a/aio/content/examples/lifecycle-hooks/src/app/app.module.ts b/aio/content/examples/lifecycle-hooks/src/app/app.module.ts
index 4d9cabf218..383f6c2a3f 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/app.module.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/app.module.ts
@@ -5,32 +5,22 @@ import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 
-import {
-  AfterContentParentComponent,
-  AfterContentComponent,
-  ChildComponent
-} from './after-content.component';
+import { AfterContentParentComponent } from './after-content-parent.component';
+import { AfterContentComponent } from './after-content.component';
+import { ChildComponent } from './child.component';
 
-import {
-  AfterViewParentComponent,
-  AfterViewComponent,
-  ChildViewComponent
-} from './after-view.component';
+import { AfterViewParentComponent } from './after-view-parent.component';
+import { AfterViewComponent } from './after-view.component';
+import { ChildViewComponent } from './child-view.component';
 
-import {
-  CounterParentComponent,
-  MyCounterComponent
-} from './counter.component';
+import { CounterParentComponent } from './counter-parent.component';
+import { MyCounterComponent } from './counter.component';
 
-import {
-  DoCheckParentComponent,
-  DoCheckComponent
-} from './do-check.component';
+import { DoCheckParentComponent } from './do-check-parent.component';
+import { DoCheckComponent } from './do-check.component';
 
-import {
-  OnChangesParentComponent,
-  OnChangesComponent
-} from './on-changes.component';
+import { OnChangesParentComponent } from './on-changes-parent.component';
+import { OnChangesComponent } from './on-changes.component';
 
 import { PeekABooParentComponent } from './peek-a-boo-parent.component';
 import { PeekABooComponent } from './peek-a-boo.component';
diff --git a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
index a2d7b5fd9b..192cc06f7e 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
@@ -4,8 +4,6 @@ import {
   OnChanges, SimpleChanges,
 } from '@angular/core';
 
-import { LoggerService } from './logger.service';
-
 @Component({
   selector: 'app-counter',
   template: `
@@ -37,46 +35,3 @@ export class MyCounterComponent implements OnChanges {
     this.changeLog.push(`counter: currentValue = ${cur}, previousValue = ${prev}`);
   }
 }
-
-@Component({
-  selector: 'counter-parent',
-  template: `
-   <div class="parent">
-    <h2>Counter Spy</h2>
-
-    <button (click)="updateCounter()">Update counter</button>
-    <button (click)="reset()">Reset Counter</button>
-
-    <app-counter [counter]="value"></app-counter>
-
-    <h4>-- Spy Lifecycle Hook Log --</h4>
-    <div *ngFor="let msg of spyLog">{{msg}}</div>
-   </div>
-  `,
-  styles: ['.parent {background: gold;}'],
-  providers: [LoggerService]
-})
-export class CounterParentComponent {
-  value: number;
-  spyLog: string[] = [];
-
-  private logger: LoggerService;
-
-  constructor(logger: LoggerService) {
-    this.logger = logger;
-    this.spyLog = logger.logs;
-    this.reset();
-  }
-
-  updateCounter() {
-    this.value += 1;
-    this.logger.tick();
-  }
-
-  reset() {
-    this.logger.log('-- reset --');
-    this.value = 0;
-    this.logger.tick();
-  }
-}
-
diff --git a/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
index cf7c2b91ce..42d8914977 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
+++ b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
@@ -7,7 +7,5 @@
   </table>
   <p><button (click)="reset()">Reset Log</button></p>
 
-<!-- #docregion do-check -->
-   <do-check [hero]="hero" [power]="power"></do-check>
-<!-- #enddocregion do-check -->
+  <do-check [hero]="hero" [power]="power"></do-check>
 </div>
diff --git a/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts b/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts
index 82a830dd98..33b006d907 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts
@@ -1,10 +1,8 @@
 /* tslint:disable:forin */
 // #docregion
-import { Component, DoCheck, Input, ViewChild } from '@angular/core';
+import { Component, DoCheck, Input } from '@angular/core';
 
-class Hero {
-  constructor(public name: string) {}
-}
+import { Hero } from './hero';
 
 @Component({
   selector: 'do-check',
@@ -71,23 +69,3 @@ export class DoCheckComponent implements DoCheck {
     this.changeLog = [];
   }
 }
-
-@Component({
-  selector: 'do-check-parent',
-  templateUrl: './do-check-parent.component.html',
-  styles: ['.parent {background: Lavender}']
-})
-export class DoCheckParentComponent {
-  hero: Hero;
-  power: string;
-  title = 'DoCheck';
-  @ViewChild(DoCheckComponent) childView: DoCheckComponent;
-
-  constructor() { this.reset(); }
-
-  reset() {
-    this.hero = new Hero('Windstorm');
-    this.power = 'sing';
-    if (this.childView) { this.childView.reset(); }
-  }
-}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts b/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
index b6b8ba2f9e..78e601c5a4 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
@@ -1,13 +1,8 @@
 /* tslint:disable:forin */
 // #docregion
-import {
-  Component, Input, OnChanges,
-  SimpleChanges, ViewChild
-} from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
-class Hero {
-  constructor(public name: string) {}
-}
+import { Hero } from './hero';
 
 @Component({
   selector: 'on-changes',
@@ -45,27 +40,3 @@ export class OnChangesComponent implements OnChanges {
 
   reset() { this.changeLog = []; }
 }
-
-@Component({
-  selector: 'on-changes-parent',
-  templateUrl: './on-changes-parent.component.html',
-  styles: ['.parent {background: Lavender;}']
-})
-export class OnChangesParentComponent {
-  hero: Hero;
-  power: string;
-  title = 'OnChanges';
-  @ViewChild(OnChangesComponent) childView: OnChangesComponent;
-
-  constructor() {
-    this.reset();
-  }
-
-  reset() {
-    // new Hero object every time; triggers onChanges
-    this.hero = new Hero('Windstorm');
-    // setting power only triggers onChanges if this value is different
-    this.power = 'sing';
-    if (this.childView) { this.childView.reset(); }
-  }
-}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
index c66e41a6c9..54df001f83 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
@@ -5,31 +5,17 @@ import {
   AfterContentInit,
   AfterViewChecked,
   AfterViewInit,
-  Directive,
+  Component,
   DoCheck,
+  Input,
   OnChanges,
   OnDestroy,
   OnInit,
   SimpleChanges
 } from '@angular/core';
-import { Component, Input } from '@angular/core';
+
 import { LoggerService } from './logger.service';
-
-let nextId = 1;
-
-// #docregion ngOnInit
-@Directive()
-export class PeekABooDirective implements OnInit {
-  constructor(private logger: LoggerService) { }
-
-  // implement OnInit's `ngOnInit` method
-  ngOnInit() { this.logIt(`OnInit`); }
-
-  logIt(msg: string) {
-    this.logger.log(`#${nextId++} ${msg}`);
-  }
-}
-// #enddocregion ngOnInit
+import { PeekABooDirective } from './peek-a-boo.directive';
 
 @Component({
   selector: 'peek-a-boo',
diff --git a/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts b/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts
index c14f4e6455..c364b3deca 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts
@@ -3,22 +3,23 @@ import { Directive, OnInit, OnDestroy } from '@angular/core';
 
 import { LoggerService } from './logger.service';
 
+// #docregion spy-directive
 let nextId = 1;
 
-// #docregion spy-directive
 // Spy on any element to which it is applied.
 // Usage: <div appSpy>...</div>
 @Directive({selector: '[appSpy]'})
 export class SpyDirective implements OnInit, OnDestroy {
+  private id = nextId++;
 
   constructor(private logger: LoggerService) { }
 
-  ngOnInit()    { this.logIt(`onInit`); }
+  ngOnInit() {
+    this.logger.log(`Spy #${this.id} onInit`);
+  }
 
-  ngOnDestroy() { this.logIt(`onDestroy`); }
-
-  private logIt(msg: string) {
-    this.logger.log(`Spy #${nextId++} ${msg}`);
+  ngOnDestroy() {
+    this.logger.log(`Spy #${this.id} onDestroy`);
   }
 }
 // #enddocregion spy-directive
diff --git a/aio/content/examples/ngcontainer/src/app/app.component.css b/aio/content/examples/ngcontainer/src/app/app.component.css
index a5c959f6f7..6631f05f47 100644
--- a/aio/content/examples/ngcontainer/src/app/app.component.css
+++ b/aio/content/examples/ngcontainer/src/app/app.component.css
@@ -1,4 +1,3 @@
-/* #docregion */
 button {
   min-width: 100px;
   font-size: 100%;
@@ -31,9 +30,7 @@ th {
   vertical-align: top;
 }
 
-/* #docregion p-span */
 p span {
   color: red;
   font-size: 70%;
 }
-/* #enddocregion p-span */
diff --git a/aio/content/examples/ngcontainer/src/app/app.component.html b/aio/content/examples/ngcontainer/src/app/app.component.html
index 0f1c2d3e89..e4cf49051c 100644
--- a/aio/content/examples/ngcontainer/src/app/app.component.html
+++ b/aio/content/examples/ngcontainer/src/app/app.component.html
@@ -2,9 +2,7 @@
 <!-- #docregion -->
 <h1>&lt;ng-container&gt;</h1>
 
-<!-- #docregion ngif -->
 <div *ngIf="hero">{{hero.name}}</div>
-<!-- #enddocregion ngif -->
 
 <hr>
 
@@ -14,7 +12,6 @@
 <button (click)="hero = hero ? null : heroes[0]">Toggle hero</button>
 
 <h4>#1 &lt;ng-container&gt; and &lt;p&gt;</h4>
-<!-- #docregion ngif-ngcontainer -->
 <p>
   I turned the corner
   <ng-container *ngIf="hero">
@@ -22,8 +19,6 @@
   </ng-container>
   and continued on my way.
 </p>
-<!-- #enddocregion ngif-ngcontainer -->
-<!-- #docregion ngif-span -->
 <p>
   I turned the corner
   <span *ngIf="hero">
@@ -31,12 +26,10 @@
   </span>
   and continued on my way.
 </p>
-<!-- #enddocregion ngif-span -->
 
 <h4>#2 &lt;ng-container&gt; and &lt;p&gt;</h4>
 
 <div *ngIf="hero">
-  <!-- #docregion ngif-ngcontainer-2 -->
   <p>
     {{hero.name}} is
     <ng-container *ngFor="let trait of heroTraits; let first=first; let last=last">
@@ -45,9 +38,7 @@
       {{trait}}
     </ng-container>.
   </p>
-  <!-- #enddocregion ngif-ngcontainer-2 -->
 
-  <!-- #docregion ngif-span-2 -->
   <p>
     {{hero.name}} is
     <span *ngFor="let trait of heroTraits; let first=first; let last=last">
@@ -56,28 +47,23 @@
       {{trait}}
     </span>.
   </p>
-  <!-- #enddocregion ngif-span-2 -->
 
 <br>
 
 <h4>#3 &lt;ng-container&gt; and &lt;p&gt;</h4>
-    <!-- #docregion ngif-span-3 -->
-    <p>
-      <label><input type="checkbox" [checked]="showId" (change)="showId=!showId">Show ID</label>
-    </p>
-    <!-- #enddocregion ngif-span-3 -->
+  <p>
+    <label><input type="checkbox" [checked]="showId" (change)="showId=!showId">Show ID</label>
+  </p>
 
   <div>
     The <code>hero.id</code> in the &lt;span&gt;
     is caught by the <span>p-span</span> CSS:
-    <!-- #docregion ngif-span-3 -->
     <p>
       <span *ngIf="showId">
         Id: ({{hero.id}})
       </span>
       Name: {{hero.name}}
     </p>
-    <!-- #enddocregion ngif-span-3 -->
   </div>
 
   <div>
@@ -129,7 +115,6 @@
   Pick your favorite hero
   (<label><input type="checkbox" checked (change)="showSad=!showSad">show sad</label>)
 </div>
-<!-- #docregion select-span -->
 <select [(ngModel)]="hero">
   <span *ngFor="let h of heroes">
     <span *ngIf="showSad || h?.emotion !== 'sad'">
@@ -137,14 +122,12 @@
     </span>
   </span>
 </select>
-<!-- #enddocregion select-span -->
 
 <p><i>&lt;select&gt; with &lt;ng-container&gt;</i></p>
 <div>
   Pick your favorite hero
   (<label><input type="checkbox" checked (change)="showSad=!showSad">show sad</label>)
 </div>
-<!-- #docregion select-ngcontainer -->
 <select [(ngModel)]="hero">
   <ng-container *ngFor="let h of heroes">
     <ng-container *ngIf="showSad || h?.emotion !== 'sad'">
@@ -152,7 +135,6 @@
     </ng-container>
   </ng-container>
 </select>
-<!-- #enddocregion select-ngcontainer -->
 
 <br><br><br><br>
 
@@ -168,7 +150,6 @@
 <p>Options with &lt;ng-container&gt;</p>
 
 <select #traitPicker>
-  <!-- #docregion select-ngcontainer-2 -->
   <ng-container *ngIf="showDefaultTraits">
     <!-- Default traits -->
     <option value="loyal">LOYAL</option>
@@ -178,12 +159,10 @@
   <option *ngFor="let trait of heroTraits" [value]="trait">
     {{ trait | uppercase }}
   </option>
-  <!-- #enddocregion select-ngcontainer-2 -->
 </select>
 
 
 <p>Options with &lt;span&gt;</p>
-<!-- #docregion select-span-2 -->
 <select>
   <!-- Default traits are always excluded because intermediate <span> is illegal -->
   <span *ngIf="showDefaultTraits">
@@ -195,7 +174,6 @@
     {{ trait | uppercase }}
   </option>
 </select>
-<!-- #enddocregion select-span-2 -->
 
 <br>
 
@@ -218,7 +196,6 @@
   </tr>
 
 <ng-container *ngIf="divNgIf">
-  <!-- #docregion ngif-div -->
   <div *ngIf="strucDirs">
     <tr>
       <td>xxx</td><td>S</td><td>div with *ngIf formats crazy.</td>
@@ -227,10 +204,8 @@
       <td>yyy</td><td>S</td><td>div with *ngIf formats crazy.</td>
     </tr>
   </div>
-  <!-- #enddocregion ngif-div -->
 </ng-container>
 
-  <!-- #docregion ngif-ngcontainer-4 -->
   <ng-container *ngIf="strucDirs">
     <tr>
       <td>NgFor</td><td>S</td><td>Repeat the template for each item in a list.</td>
@@ -239,7 +214,6 @@
       <td>NgIf</td><td>S</td><td>Add or remove DOM elements.</td>
     </tr>
   </ng-container>
-  <!-- #enddocregion ngif-ngcontainer-4 -->
 
   <ng-container *ngIf="attrDirs">
     <tr>
@@ -247,11 +221,9 @@
     </tr>
   </ng-container>
 
-  <!-- #docregion ngif-tr -->
   <tr *ngIf="strucDirs">
     <td>NgSwitch</td><td>S</td><td>Include in DOM if case matches the switch value.</td>
   </tr>
-  <!-- #enddocregion ngif-tr -->
 
 </table>
 
@@ -260,20 +232,14 @@
 <h3>Do not confuse &lt;ng-container&gt; with &lt;ng-content&gt;</h3>
 
 <p>&lt;ng-container&gt;Inside ng-container&lt;/ng-container&gt;</p>
-<!-- #docregion ngcontainer-bare -->
 <ng-container>Inside ng-container</ng-container>
-<!-- #enddocregion ngcontainer-bare -->
 
 <p>&lt;ng-content&gt;this is an Angular parse error&lt;/ng-content&gt;</p>
-<!-- #docregion ngcontent-bad -->
 <!--  <ng-content>this is an Angular parse error</ng-content>  -->
-<!-- #enddocregion ngcontent-bad -->
 <div class="code">Template parse errors:<br>
 &lt;ng-content&gt; element cannot have content.</div>
 
 <p>Demo of &lt;/ng-content&gt;</p>
-<!-- #docregion content-comp -->
 <content-comp>
   Projected content
 </content-comp>
-<!-- #enddocregion content-comp -->
diff --git a/aio/content/examples/ngcontainer/src/app/content.component.ts b/aio/content/examples/ngcontainer/src/app/content.component.ts
index a2580b0dee..bb3af9c040 100644
--- a/aio/content/examples/ngcontainer/src/app/content.component.ts
+++ b/aio/content/examples/ngcontainer/src/app/content.component.ts
@@ -1,14 +1,11 @@
-// #docregion
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'content-comp',
-  // #docregion template
   template:
     `<div>
       <ng-content></ng-content>
     </div>`,
-  // #enddocregion template
   styles: [ `
     div { border: medium dashed green; padding: 1em; width: 150px; text-align: center}
   `]
diff --git a/aio/content/examples/pipes/src/app/app.component.html b/aio/content/examples/pipes/src/app/app.component.html
index add2dd2455..c443e5a21e 100644
--- a/aio/content/examples/pipes/src/app/app.component.html
+++ b/aio/content/examples/pipes/src/app/app.component.html
@@ -51,10 +51,8 @@
 <!-- #enddocregion chained-parameter-birthday -->
 </p>
 <p>
-<!-- #docregion chained-parameter-birthday-parens -->
   The chained hero's birthday is
   {{ ( birthday | date:'fullDate' ) | uppercase}}
-<!-- #enddocregion chained-parameter-birthday-parens -->
 </p>
 <hr>
 <a id="power-booster"></a>
diff --git a/aio/content/examples/pipes/src/app/fetch-json.pipe.ts b/aio/content/examples/pipes/src/app/fetch-json.pipe.ts
index edd4eaa079..6d401431d4 100644
--- a/aio/content/examples/pipes/src/app/fetch-json.pipe.ts
+++ b/aio/content/examples/pipes/src/app/fetch-json.pipe.ts
@@ -1,13 +1,10 @@
-// #docregion
 import { HttpClient } from '@angular/common/http';
 import { Pipe, PipeTransform } from '@angular/core';
 
-// #docregion pipe-metadata
 @Pipe({
   name: 'fetch',
   pure: false
 })
-// #enddocregion pipe-metadata
 export class FetchJsonPipe implements PipeTransform {
   private cachedData: any = null;
   private cachedUrl = '';
diff --git a/aio/content/examples/pipes/src/app/flying-heroes-impure.component.html b/aio/content/examples/pipes/src/app/flying-heroes-impure.component.html
index 66bd86f81c..8a7089aaf8 100644
--- a/aio/content/examples/pipes/src/app/flying-heroes-impure.component.html
+++ b/aio/content/examples/pipes/src/app/flying-heroes-impure.component.html
@@ -2,19 +2,15 @@
 <!-- #docregion -->
 <h2>{{title}}</h2>
 <p>
-<!-- #docregion template-1 -->
 New hero:
   <input type="text" #box
           (keyup.enter)="addHero(box.value); box.value=''"
           placeholder="hero name">
-<!-- #enddocregion template-1 -->
   <input id="can-fly" type="checkbox" [(ngModel)]="canFly"> can fly
 </p>
 <p>
   <input id="mutate" type="checkbox" [(ngModel)]="mutate">Mutate array
-<!-- #docregion template-1 -->
   <button (click)="reset()">Reset</button>
-<!-- #enddocregion template-1 -->
 </p>
 
 <h4>Heroes who fly (piped)</h4>
@@ -28,11 +24,7 @@ New hero:
 
 <h4>All Heroes (no pipe)</h4>
 <div id="all">
-<!-- #docregion template-1 -->
-<!-- #docregion template-all-heroes -->
   <div *ngFor="let hero of heroes">
     {{hero.name}}
   </div>
-<!-- #enddocregion template-all-heroes -->
-<!-- #enddocregion template-1 -->
 </div>
diff --git a/aio/content/examples/pipes/src/app/flying-heroes.component.html b/aio/content/examples/pipes/src/app/flying-heroes.component.html
index 93e635b662..fe865acf2c 100644
--- a/aio/content/examples/pipes/src/app/flying-heroes.component.html
+++ b/aio/content/examples/pipes/src/app/flying-heroes.component.html
@@ -29,10 +29,8 @@ New hero:
 <h4>All Heroes (no pipe)</h4>
 <div id="all">
 <!-- #docregion template-1 -->
-<!-- #docregion template-all-heroes -->
   <div *ngFor="let hero of heroes">
     {{hero.name}}
   </div>
-<!-- #enddocregion template-all-heroes -->
 <!-- #enddocregion template-1 -->
 </div>
diff --git a/aio/content/examples/pipes/src/app/flying-heroes.component.ts b/aio/content/examples/pipes/src/app/flying-heroes.component.ts
index 526f3b2842..f7253c48dc 100644
--- a/aio/content/examples/pipes/src/app/flying-heroes.component.ts
+++ b/aio/content/examples/pipes/src/app/flying-heroes.component.ts
@@ -35,9 +35,7 @@ export class FlyingHeroesComponent {
 // #enddocregion v1
     } else {
       // Pipe updates display because heroes array is a new object
-// #docregion concat
       this.heroes = this.heroes.concat(hero);
-// #enddocregion concat
     }
 // #docregion v1
   }
@@ -47,15 +45,11 @@ export class FlyingHeroesComponent {
 // #enddocregion v1
 
 ////// Identical except for impure pipe //////
-// #docregion impure-component
 @Component({
   selector: 'app-flying-heroes-impure',
   templateUrl: './flying-heroes-impure.component.html',
-// #enddocregion impure-component
   styles: ['.flyers, .all {font-style: italic}'],
-// #docregion impure-component
 })
 export class FlyingHeroesImpureComponent extends FlyingHeroesComponent {
   title = 'Flying Heroes (impure pipe)';
 }
-// #enddocregion impure-component
diff --git a/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts b/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts
index 87db9c277e..7deb7abebe 100644
--- a/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts
+++ b/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts
@@ -3,11 +3,11 @@
 // #docregion pure
 import { Pipe, PipeTransform } from '@angular/core';
 
-import { Flyer } from './heroes';
+import { Hero } from './heroes';
 
 @Pipe({ name: 'flyingHeroes' })
 export class FlyingHeroesPipe implements PipeTransform {
-  transform(allHeroes: Flyer[]) {
+  transform(allHeroes: Hero[]) {
     // #docregion filter
     return allHeroes.filter(hero => hero.canFly);
     // #enddocregion filter
diff --git a/aio/content/examples/pipes/src/app/hero-birthday1.component.ts b/aio/content/examples/pipes/src/app/hero-birthday1.component.ts
index 4b475e80d6..d330a0a105 100644
--- a/aio/content/examples/pipes/src/app/hero-birthday1.component.ts
+++ b/aio/content/examples/pipes/src/app/hero-birthday1.component.ts
@@ -1,11 +1,8 @@
-// #docregion
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-hero-birthday',
-  // #docregion hero-birthday-template
   template: `<p>The hero's birthday is {{ birthday | date }}</p>`
-  // #enddocregion hero-birthday-template
 })
 export class HeroBirthdayComponent {
   birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
diff --git a/aio/content/examples/pipes/src/app/heroes.ts b/aio/content/examples/pipes/src/app/heroes.ts
index b2edabe0da..9de7a5c36a 100644
--- a/aio/content/examples/pipes/src/app/heroes.ts
+++ b/aio/content/examples/pipes/src/app/heroes.ts
@@ -1,5 +1,5 @@
-export interface Flyer { canFly: boolean; }
-export const HEROES =  [
+export interface Hero { name: string; canFly: boolean; }
+export const HEROES: Hero[] =  [
   {name: 'Windstorm', canFly: true},
   {name: 'Bombasto',  canFly: false},
   {name: 'Magneto',   canFly: false},
diff --git a/aio/content/examples/property-binding/src/app/app.component.html b/aio/content/examples/property-binding/src/app/app.component.html
index f9b22a6765..abc21203fc 100644
--- a/aio/content/examples/property-binding/src/app/app.component.html
+++ b/aio/content/examples/property-binding/src/app/app.component.html
@@ -7,18 +7,14 @@
   <img [src]="itemImageUrl">
   <!-- #enddocregion property-binding -->
   <h2>Using bind- syntax:</h2>
-  <!-- #docregion bind-prefix -->
   <img bind-src="itemImageUrl">
-  <!-- #enddocregion bind-prefix -->
   <hr />
 
   <h2>Binding to the colSpan property</h2>
   <table border=1>
     <tr><td>Column 1</td><td>Column 2</td></tr>
-    <!-- #docregion colSpan -->
     <!-- Notice the colSpan property is camel case -->
     <tr><td [colSpan]="2">Span 2 columns</td></tr>
-    <!-- #enddocregion colSpan -->
   </table>
 
 
@@ -51,9 +47,7 @@
 
   <hr />
   <h2>Initialized string:</h2>
-  <!-- #docregion string-init -->
   <app-string-init prefix="This is a one-time initialized string."></app-string-init>
-<!-- #enddocregion string-init -->
 
   <hr />
 
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.html b/aio/content/examples/reactive-forms/src/app/app.component.html
index a953480634..d3d69112bc 100644
--- a/aio/content/examples/reactive-forms/src/app/app.component.html
+++ b/aio/content/examples/reactive-forms/src/app/app.component.html
@@ -1,17 +1,10 @@
-<!-- #docplaster -->
-<!-- #docregion app-name-editor -->
 <h1>Reactive Forms</h1>
 
-<!-- #enddocregion app-name-editor -->
 <nav>
   <a (click)="toggleEditor('name')">Name Editor</a>
   <a (click)="toggleEditor('profile')">Profile Editor</a>
 </nav>
 
-<!-- #docregion app-name-editor -->
 <app-name-editor *ngIf="showNameEditor"></app-name-editor>
-<!-- #enddocregion app-name-editor -->
 
-<!-- #docregion app-profile-editor -->
 <app-profile-editor *ngIf="showProfileEditor"></app-profile-editor>
-<!-- #enddocregion app-profile-editor -->
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
index c1fd2a10d2..489bdc0781 100644
--- a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
@@ -39,7 +39,6 @@
   </div>
   <!-- #enddocregion formgroupname -->
 
-  <!-- #docregion formarrayname -->
   <div formArrayName="aliases">
     <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>
 
@@ -51,7 +50,6 @@
       </label>
     </div>
   </div>
-  <!-- #enddocregion formarrayname -->
 <!-- #docregion formgroup -->  
 </form>
 <!-- #enddocregion formgroup -->
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
index 6d29164b1a..310e787cfe 100644
--- a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
@@ -20,7 +20,7 @@ input {
 }
 
 button {
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
index 1248cd0373..fcf50e2c94 100644
--- a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
@@ -59,12 +59,9 @@
 
 <hr>
 
-<!-- #docregion display-value -->
-
 <p>
   Form Value: {{ profileForm.value | json }}
 </p>
-<!-- #enddocregion display-value -->
 
 <!-- #docregion display-status -->
 
@@ -73,8 +70,6 @@
 </p>
 <!-- #enddocregion display-status -->
 
-<!-- #docregion patch-value -->
 <p>
   <button (click)="updateProfile()">Update Profile</button>
 </p>
-<!-- #enddocregion patch-value -->
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
index 813c97d5c0..9fbf5a628e 100644
--- a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
@@ -1,15 +1,10 @@
 // #docplaster
-// #docregion form-builder
 import { Component } from '@angular/core';
-// #docregion form-builder-imports
 import { FormBuilder } from '@angular/forms';
-// #enddocregion form-builder-imports
 // #docregion validator-imports
 import { Validators } from '@angular/forms';
 // #enddocregion validator-imports
-// #docregion form-array-imports
 import { FormArray } from '@angular/forms';
-// #enddocregion form-array-imports
 
 @Component({
   selector: 'app-profile-editor',
@@ -27,13 +22,13 @@ export class ProfileEditorComponent {
       state: [''],
       zip: ['']
     }),
-// #enddocregion form-builder, required-validator
+// #enddocregion required-validator
     aliases: this.fb.array([
       this.fb.control('')
     ])
-// #docregion form-builder, required-validator
+// #docregion required-validator
   });
-// #enddocregion form-builder, required-validator, aliases
+// #enddocregion required-validator, aliases
 // #docregion aliases-getter
 
   get aliases() {
@@ -41,11 +36,8 @@ export class ProfileEditorComponent {
   }
 
 // #enddocregion aliases-getter
-// #docregion inject-form-builder, form-builder
   constructor(private fb: FormBuilder) { }
 
-// #enddocregion inject-form-builder
-
   updateProfile() {
     this.profileForm.patchValue({
       firstName: 'Nancy',
@@ -54,7 +46,6 @@ export class ProfileEditorComponent {
       }
     });
   }
-// #enddocregion form-builder
 // #docregion add-alias
 
   addAlias() {
@@ -68,6 +59,4 @@ export class ProfileEditorComponent {
     console.warn(this.profileForm.value);
   }
 // #enddocregion on-submit
-// #docregion form-builder
 }
-// #enddocregion form-builder
diff --git a/aio/content/examples/router-tutorial/src/app/app.component.css b/aio/content/examples/router-tutorial/src/app/app.component.css
index fcefcc4011..2e126e77bb 100644
--- a/aio/content/examples/router-tutorial/src/app/app.component.css
+++ b/aio/content/examples/router-tutorial/src/app/app.component.css
@@ -1,34 +1,32 @@
 .button {
-    box-shadow: inset 0px 1px 0px 0px #ffffff;
-    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
-    background-color: #ffffff;
+    box-shadow: inset 0 1px 0 0 #ffffff;
+    background: #ffffff linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
     border-radius: 6px;
     border: 1px solid #dcdcdc;
     display: inline-block;
     cursor: pointer;
     color: #666666;
-    font-family: Arial;
+    font-family: Arial, sans-serif;
     font-size: 15px;
     font-weight: bold;
     padding: 6px 24px;
     text-decoration: none;
-    text-shadow: 0px 1px 0px #ffffff;
+    text-shadow: 0 1px 0 #ffffff;
     outline: 0;
 }
 .activebutton {
-    box-shadow: inset 0px 1px 0px 0px #dcecfb;
-    background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
-    background-color: #bddbfa;
+    box-shadow: inset 0 1px 0 0 #dcecfb;
+    background: #bddbfa linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
     border-radius: 6px;
     border: 1px solid #84bbf3;
     display: inline-block;
     cursor: pointer;
     color: #ffffff;
-    font-family: Arial;
+    font-family: Arial, sans-serif;
     font-size: 15px;
     font-weight: bold;
     padding: 6px 24px;
     text-decoration: none;
-    text-shadow: 0px 1px 0px #528ecc;
+    text-shadow: 0 1px 0 #528ecc;
     outline: 0;
-}
\ No newline at end of file
+}
diff --git a/aio/content/examples/router/src/app/admin/admin-routing.module.3.ts b/aio/content/examples/router/src/app/admin/admin-routing.module.3.ts
index 5d9afe4728..b19cfdca16 100644
--- a/aio/content/examples/router/src/app/admin/admin-routing.module.3.ts
+++ b/aio/content/examples/router/src/app/admin/admin-routing.module.3.ts
@@ -8,7 +8,6 @@ import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.compo
 import { ManageCrisesComponent } from './manage-crises/manage-crises.component';
 import { ManageHeroesComponent } from './manage-heroes/manage-heroes.component';
 
-// #docregion admin-route
 import { AuthGuard } from '../auth/auth.guard';
 
 // #docregion can-activate-child
diff --git a/aio/content/examples/router/src/app/app-routing.module.5.ts b/aio/content/examples/router/src/app/app-routing.module.5.ts
index 112493b86d..9016345b9e 100644
--- a/aio/content/examples/router/src/app/app-routing.module.5.ts
+++ b/aio/content/examples/router/src/app/app-routing.module.5.ts
@@ -1,9 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule } from '@angular/core';
-// #docregion import-router
 import { RouterModule, Routes } from '@angular/router';
-// #enddocregion import-router
 
 import { ComposeMessageComponent } from './compose-message/compose-message.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
diff --git a/aio/content/examples/router/src/app/app-routing.module.ts b/aio/content/examples/router/src/app/app-routing.module.ts
index deb5db507b..0e42b2b2f7 100644
--- a/aio/content/examples/router/src/app/app-routing.module.ts
+++ b/aio/content/examples/router/src/app/app-routing.module.ts
@@ -1,5 +1,5 @@
 // #docplaster
-// #docregion, preload-v1
+// #docregion
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
diff --git a/aio/content/examples/router/src/app/app.component.3.ts b/aio/content/examples/router/src/app/app.component.3.ts
index 879600274d..2f989c3ab8 100644
--- a/aio/content/examples/router/src/app/app.component.3.ts
+++ b/aio/content/examples/router/src/app/app.component.3.ts
@@ -11,17 +11,13 @@ import { Router } from '@angular/router';
   // #enddocregion h-anchor
   */
   /* Incomplete Crisis Center link when CC lacks a default
-  // #docregion cc-anchor-fail
   // The link now fails with a "non-terminal link" error
   // #docregion cc-anchor-w-default
   <a [routerLink]="['/crisis-center']">Crisis Center</a>
   // #enddocregion cc-anchor-w-default
-  // #enddocregion cc-anchor-fail
   */
   /* Crisis Center link when CC lacks a default
-  // #docregion cc-anchor-no-default
   <a [routerLink]="['/crisis-center/']">Crisis Center</a>
-  // #enddocregion cc-anchor-no-default
   */
   /* Crisis Center Detail link
   // #docregion Dragon-anchor
diff --git a/aio/content/examples/router/src/app/app.module.1.ts b/aio/content/examples/router/src/app/app.module.1.ts
index 9587edc9b3..48048367a9 100644
--- a/aio/content/examples/router/src/app/app.module.1.ts
+++ b/aio/content/examples/router/src/app/app.module.1.ts
@@ -15,7 +15,6 @@ import { HeroListComponent } from './hero-list/hero-list.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 // #docregion first-config
 
-// #docregion appRoutes
 const appRoutes: Routes = [
   { path: 'crisis-center', component: CrisisListComponent },
   { path: 'heroes', component: HeroListComponent },
@@ -27,7 +26,6 @@ const appRoutes: Routes = [
 // #enddocregion wildcard
 // #docregion first-config
 ];
-// #enddocregion appRoutes
 
 @NgModule({
   imports: [
diff --git a/aio/content/examples/router/src/app/app.module.2.ts b/aio/content/examples/router/src/app/app.module.2.ts
index 5117f9aab4..ebdebe57df 100644
--- a/aio/content/examples/router/src/app/app.module.2.ts
+++ b/aio/content/examples/router/src/app/app.module.2.ts
@@ -1,6 +1,3 @@
-// #docplaster
-// #docregion
-// #docregion hero-import
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
@@ -26,6 +23,4 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
   ],
   bootstrap: [ AppComponent ]
 })
-// #enddocregion hero-import
 export class AppModule { }
-// #enddocregion
diff --git a/aio/content/examples/router/src/app/app.module.3.ts b/aio/content/examples/router/src/app/app.module.3.ts
index 0fd2e0557d..5ead6a2028 100644
--- a/aio/content/examples/router/src/app/app.module.3.ts
+++ b/aio/content/examples/router/src/app/app.module.3.ts
@@ -21,9 +21,7 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
     BrowserModule,
 // #enddocregion module-imports
 // #enddocregion remove-heroes
-// #docregion animation-import
     BrowserAnimationsModule,
-// #enddocregion animation-import
 // #docregion remove-heroes
 // #docregion module-imports
     FormsModule,
@@ -41,14 +39,3 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
 export class AppModule { }
 // #enddocregion remove-heroes
 // #enddocregion
-
-/*
-// #docregion module-imports-2
-  imports: [
-    RouterModule.forChild([
-      // Heroes Routes
-    ]),
-    AppRoutingModule
-  ],
-// #enddocregion module-imports-2
-*/
diff --git a/aio/content/examples/router/src/app/app.module.ts b/aio/content/examples/router/src/app/app.module.ts
index 4e85829763..2f5fb97be3 100644
--- a/aio/content/examples/router/src/app/app.module.ts
+++ b/aio/content/examples/router/src/app/app.module.ts
@@ -7,10 +7,8 @@ import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 // #enddocregion auth, animations-module
-// #docregion inspect-config
 import { Router } from '@angular/router';
 
-// #enddocregion inspect-config
 // #docregion auth
 import { AppComponent } from './app.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
diff --git a/aio/content/examples/router/src/app/auth/auth.guard.2.ts b/aio/content/examples/router/src/app/auth/auth.guard.2.ts
index 80df7d7032..55ca9d49ed 100644
--- a/aio/content/examples/router/src/app/auth/auth.guard.2.ts
+++ b/aio/content/examples/router/src/app/auth/auth.guard.2.ts
@@ -29,9 +29,3 @@ export class AuthGuard implements CanActivate {
   }
 }
 // #enddocregion
-
-/*
-// #docregion can-load-interface
-export class AuthGuard implements CanActivate, CanLoad {
-// #enddocregion can-load-interface
-*/
diff --git a/aio/content/examples/router/src/app/auth/auth.guard.ts b/aio/content/examples/router/src/app/auth/auth.guard.ts
index 3aa5487708..b9c0f48022 100644
--- a/aio/content/examples/router/src/app/auth/auth.guard.ts
+++ b/aio/content/examples/router/src/app/auth/auth.guard.ts
@@ -54,5 +54,4 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
     this.router.navigate(['/login'], navigationExtras);
     return false;
   }
-// #docregion admin-can-load
 }
diff --git a/aio/content/examples/router/src/app/auth/auth.module.ts b/aio/content/examples/router/src/app/auth/auth.module.ts
index 0c6a43d684..ea37f28339 100644
--- a/aio/content/examples/router/src/app/auth/auth.module.ts
+++ b/aio/content/examples/router/src/app/auth/auth.module.ts
@@ -1,5 +1,3 @@
-// #docplaster
-// #docregion
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -7,19 +5,14 @@ import { FormsModule } from '@angular/forms';
 import { LoginComponent } from './login/login.component';
 import { AuthRoutingModule } from './auth-routing.module';
 
-// #docregion v1
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
-// #enddocregion v1
     AuthRoutingModule
-// #docregion v1
   ],
   declarations: [
     LoginComponent
   ]
 })
 export class AuthModule {}
-// #enddocregion v1
-// #enddocregion
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts
index d894507e1e..9ee9ea772a 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts
@@ -1,5 +1,3 @@
-// #docplaster
-// #docregion routes
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
@@ -7,20 +5,12 @@ import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-ho
 import { CrisisListComponent } from './crisis-list/crisis-list.component';
 import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
 import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';
-// #enddocregion routes
 
-// #docregion can-deactivate-guard
 import { CanDeactivateGuard } from '../can-deactivate.guard';
-// #enddocregion can-deactivate-guard
-// #docregion crisis-detail-resolver
 import { CrisisDetailResolverService } from './crisis-detail-resolver.service';
 
-// #enddocregion crisis-detail-resolver
-// #docregion routes
 
 const crisisCenterRoutes: Routes = [
-// #enddocregion routes
-  // #docregion routes
   {
     path: 'crisis-center',
     component: CrisisCenterComponent,
@@ -32,16 +22,10 @@ const crisisCenterRoutes: Routes = [
           {
             path: ':id',
             component: CrisisDetailComponent,
-  // #enddocregion routes
-            // #docregion can-deactivate-guard
             canDeactivate: [CanDeactivateGuard],
-            // #enddocregion can-deactivate-guard
-            // #docregion crisis-detail-resolver
             resolve: {
               crisis: CrisisDetailResolverService
             }
-            // #enddocregion crisis-detail-resolver
-  // #docregion routes
           },
           {
             path: '',
@@ -51,7 +35,6 @@ const crisisCenterRoutes: Routes = [
       }
     ]
   }
-  // #enddocregion routes
 ];
 
 @NgModule({
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts
index 4082a7d433..b62ba4dd7a 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts
@@ -1,5 +1,3 @@
-// #docplaster
-// #docregion
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
@@ -8,7 +6,6 @@ import { CrisisListComponent } from './crisis-list/crisis-list.component';
 import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
 import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';
 
-// #docregion can-deactivate-guard
 import { CanDeactivateGuard } from '../can-deactivate.guard';
 
 const crisisCenterRoutes: Routes = [
@@ -44,4 +41,3 @@ const crisisCenterRoutes: Routes = [
   ]
 })
 export class CrisisCenterRoutingModule { }
-// #enddocregion
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts
index 6b1399eb9a..6e7516296f 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts
@@ -1,5 +1,3 @@
-// #docplaster
-// #docregion
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 import { Observable } from 'rxjs';
@@ -25,7 +23,6 @@ export class CrisisDetailComponent implements OnInit {
     public dialogService: DialogService
   ) {}
 
-  // #docregion ngOnInit
   ngOnInit() {
     this.route.paramMap
       .pipe(
@@ -40,7 +37,6 @@ export class CrisisDetailComponent implements OnInit {
         }
       });
   }
-  // #enddocregion ngOnInit
 
   cancel() {
     this.gotoCrises();
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.css b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.css
index 65ce4b1e70..5a978c35c9 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.css
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.css
@@ -54,8 +54,7 @@ button {
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
@@ -76,4 +75,4 @@ button.delete {
 }
 .crises li.selected:hover {
   background-color: #BBD8DC;
-}
\ No newline at end of file
+}
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.html b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.html
index 062bd6b319..31866a018f 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.html
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.html
@@ -1,12 +1,10 @@
-<!-- #docregion relative-navigation-router-link -->
-  <ul class="crises">
-    <li *ngFor="let crisis of crises$ | async"
-      [class.selected]="crisis.id === selectedId">
-      <a [routerLink]="[crisis.id]">
-        <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
-      </a>
-    </li>
-  </ul>
+<ul class="crises">
+  <li *ngFor="let crisis of crises$ | async"
+    [class.selected]="crisis.id === selectedId">
+    <a [routerLink]="[crisis.id]">
+      <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
+    </a>
+  </li>
+</ul>
 
-  <router-outlet></router-outlet>
-<!-- #enddocregion relative-navigation-router-link -->
\ No newline at end of file
+<router-outlet></router-outlet>
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts
index bb4bc56284..19bf6c3177 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
@@ -16,12 +15,10 @@ export class CrisisListComponent implements OnInit {
   crises$: Observable<Crisis[]>;
   selectedId: number;
 
-  // #docregion ctor
   constructor(
     private service: CrisisService,
     private route: ActivatedRoute
   ) {}
-  // #enddocregion ctor
 
   ngOnInit() {
     this.crises$ = this.route.paramMap.pipe(
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts
index 42cb60e1f8..b340df6daf 100644
--- a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts
@@ -1,8 +1,6 @@
 // #docplaster
 // #docregion
-// #docregion rxjs-operator-import
 import { switchMap } from 'rxjs/operators';
-// #enddocregion rxjs-operator-import
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 // #docregion imports
@@ -20,22 +18,18 @@ import { Hero } from '../hero';
 export class HeroDetailComponent implements OnInit  {
   hero$: Observable<Hero>;
 
-  // #docregion ctor
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private service: HeroService
   ) {}
-  // #enddocregion ctor
 
-  // #docregion ngOnInit
   ngOnInit() {
     this.hero$ = this.route.paramMap.pipe(
       switchMap((params: ParamMap) =>
         this.service.getHero(params.get('id')))
     );
   }
-  // #enddocregion ngOnInit
 
   // #docregion gotoHeroes
   gotoHeroes() {
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts
index afcb4fa6c5..ddd4e270f5 100644
--- a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts
@@ -45,9 +45,3 @@ export class HeroDetailComponent implements OnInit {
   }
   // #enddocregion gotoHeroes
 }
-
-/*
-// #docregion redirect
-  this.router.navigate(['/superheroes', { id: heroId, foo: 'foo' }]);
-// #enddocregion redirect
-*/
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html
index 734826381b..322e996926 100644
--- a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html
+++ b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html
@@ -1,4 +1,3 @@
-<!-- #docregion template -->
 <h2>HEROES</h2>
 <ul class="items">
   <li *ngFor="let hero of heroes$ | async">
@@ -13,4 +12,3 @@
 </ul>
 
 <button routerLink="/sidekicks">Go to sidekicks</button>
-<!-- #enddocregion template -->
\ No newline at end of file
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts
index a83563ee58..f621428e6d 100644
--- a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts
@@ -1,5 +1,3 @@
-// #docplaster
-// #docregion
 // TODO: Feature Componetized like HeroCenter
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
@@ -16,15 +14,12 @@ import { Hero } from '../hero';
 export class HeroListComponent implements OnInit {
   heroes$: Observable<Hero[]>;
 
-  // #docregion ctor
   constructor(
     private router: Router,
     private service: HeroService
   ) {}
-  // #enddocregion ctor
 
   ngOnInit() {
     this.heroes$ = this.service.getHeroes();
   }
 }
-// #enddocregion
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css
index a5e62b257b..7c8e1be801 100644
--- a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css
+++ b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css
@@ -55,8 +55,7 @@ button {
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
@@ -79,4 +78,4 @@ button.delete {
 .heroes li.selected:hover {
   background-color: #BBD8DC;
 }
-/* #enddocregion selected */
\ No newline at end of file
+/* #enddocregion selected */
diff --git a/aio/content/examples/router/src/app/heroes/heroes.module.ts b/aio/content/examples/router/src/app/heroes/heroes.module.ts
index e5f8999bc1..dca5e08e2f 100644
--- a/aio/content/examples/router/src/app/heroes/heroes.module.ts
+++ b/aio/content/examples/router/src/app/heroes/heroes.module.ts
@@ -1,6 +1,3 @@
-// #docplaster
-// #docregion
-// #docregion v1
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -8,17 +5,13 @@ import { FormsModule } from '@angular/forms';
 import { HeroListComponent } from './hero-list/hero-list.component';
 import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 
-// #enddocregion v1
 import { HeroesRoutingModule } from './heroes-routing.module';
 
-// #docregion v1
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
-// #enddocregion v1
     HeroesRoutingModule
-// #docregion v1
   ],
   declarations: [
     HeroListComponent,
@@ -26,5 +19,3 @@ import { HeroesRoutingModule } from './heroes-routing.module';
   ]
 })
 export class HeroesModule {}
-// #enddocregion v1
-// #enddocregion
diff --git a/aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts b/aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts
index a36cf29acd..a94cde3174 100644
--- a/aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts
+++ b/aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts
@@ -6,37 +6,53 @@ import {
   chain, mergeWith
 } from '@angular-devkit/schematics';
 
-import { strings, normalize, experimental } from '@angular-devkit/core';
+import { strings, normalize, virtualFs, workspaces } from '@angular-devkit/core';
 // #enddocregion schematics-imports
 
 import { Schema as MyServiceSchema } from './schema';
 // #enddocregion schema-imports
 
+function createHost(tree: Tree): workspaces.WorkspaceHost {
+  return {
+    async readFile(path: string): Promise<string> {
+      const data = tree.read(path);
+      if (!data) {
+        throw new SchematicsException('File not found.');
+      }
+      return virtualFs.fileBufferToString(data);
+    },
+    async writeFile(path: string, data: string): Promise<void> {
+      return tree.overwrite(path, data);
+    },
+    async isDirectory(path: string): Promise<boolean> {
+      return !tree.exists(path) && tree.getDir(path).subfiles.length > 0;
+    },
+    async isFile(path: string): Promise<boolean> {
+      return tree.exists(path);
+    },
+  };
+}
+
 export function myService(options: MyServiceSchema): Rule {
-  return (tree: Tree) => {
-    const workspaceConfig = tree.read('/angular.json');
-    if (!workspaceConfig) {
-      throw new SchematicsException('Could not find Angular workspace configuration');
-    }
+  return async (tree: Tree) => {
+    const host = createHost(tree);
+    const { workspace } = await workspaces.readWorkspace('/', host);
 
-    // convert workspace to string
-    const workspaceContent = workspaceConfig.toString();
-
-    // parse workspace string into JSON object
-    const workspace: experimental.workspace.WorkspaceSchema = JSON.parse(workspaceContent);
 // #enddocregion workspace
+
+// #docregion project-info
 // #docregion project-fallback
     if (!options.project) {
-      options.project = workspace.defaultProject;
+      options.project = workspace.extensions.defaultProject;
     }
 // #enddocregion project-fallback
 
-// #docregion project-info
-    const projectName = options.project as string;
+    const project = workspace.projects.get(options.project);
+    if (!project) {
+      throw new SchematicsException(`Invalid project name: ${options.project}`);
+    }
 
-    const project = workspace.projects[projectName];
-
-    const projectType = project.projectType === 'application' ? 'app' : 'lib';
+    const projectType = project.extensions.projectType === 'application' ? 'app' : 'lib';
 // #enddocregion project-info
 
 // #docregion path
diff --git a/aio/content/examples/service-worker-getting-started/src/app/app.module.ts b/aio/content/examples/service-worker-getting-started/src/app/app.module.ts
index daaf81e652..b488c3a8e0 100755
--- a/aio/content/examples/service-worker-getting-started/src/app/app.module.ts
+++ b/aio/content/examples/service-worker-getting-started/src/app/app.module.ts
@@ -2,16 +2,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 
-// #docregion sw-import
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
-// #enddocregion sw-import
 
 import { CheckForUpdateService } from './check-for-update.service';
 import { LogUpdateService } from './log-update.service';
 import { PromptUpdateService } from './prompt-update.service';
 
-// #docregion sw-module
 @NgModule({
   declarations: [
     AppComponent
@@ -28,4 +25,3 @@ import { PromptUpdateService } from './prompt-update.service';
   bootstrap: [AppComponent]
 })
 export class AppModule { }
-// #enddocregion sw-module
diff --git a/aio/content/examples/setup/src/index.html b/aio/content/examples/setup/src/index.html
index 9943adfb10..fb561c69e2 100644
--- a/aio/content/examples/setup/src/index.html
+++ b/aio/content/examples/setup/src/index.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-<!-- #docregion -->
 <html>
   <head>
     <title>Angular Quickstart Seed</title>
@@ -20,9 +19,7 @@
   </head>
 
   <body>
-    <!-- #docregion app-root-->
     <app-root><!-- content managed by Angular --></app-root>
-    <!-- #enddocregion app-root-->
   </body>
 
 </html>
diff --git a/aio/content/examples/structural-directives/src/app/app.component.css b/aio/content/examples/structural-directives/src/app/app.component.css
index a3ed305907..b309e8bcf3 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.css
+++ b/aio/content/examples/structural-directives/src/app/app.component.css
@@ -42,9 +42,7 @@ td, th {
   vertical-align: top;
 }
 
-/* #docregion p-span */
 p span { color: red; font-size: 70%; }
-/* #enddocregion p-span */
 
 .unless {
   border: 2px solid;
diff --git a/aio/content/examples/structural-directives/src/app/app.component.html b/aio/content/examples/structural-directives/src/app/app.component.html
index 00aa52ac2b..9fd74b2098 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.html
+++ b/aio/content/examples/structural-directives/src/app/app.component.html
@@ -5,27 +5,21 @@
 <p>Conditional display of hero</p>
 
 <blockquote>
-<!-- #docregion built-in, asterisk, ngif -->
+<!-- #docregion asterisk -->
 <div *ngIf="hero" class="name">{{hero.name}}</div>
-<!-- #enddocregion built-in, asterisk, ngif -->
+<!-- #enddocregion asterisk -->
 </blockquote>
 
 <p>List of heroes</p>
-<!-- #docregion built-in -->
 
 <ul>
-  <!-- #docregion ngfor-li -->
   <li *ngFor="let hero of heroes">{{hero.name}}</li>
-  <!-- #enddocregion ngfor-li -->
 </ul>
 
-<!-- #enddocregion built-in -->
-
 <hr>
 
 <h2 id="ngIf">NgIf</h2>
 
-<!-- #docregion ngif-true -->
 <p *ngIf="true">
   Expression is true and ngIf is true.
   This paragraph is in the DOM.
@@ -34,9 +28,7 @@
   Expression is false and ngIf is false.
   This paragraph is not in the DOM.
 </p>
-<!-- #enddocregion ngif-true -->
 
-<!-- #docregion display-none -->
 <p [style.display]="'block'">
   Expression sets display to "block".
   This paragraph is visible.
@@ -45,7 +37,6 @@
   Expression sets display to "none".
   This paragraph is hidden but still in the DOM.
 </p>
-<!-- #enddocregion display-none -->
 
 <h4>NgIf with template</h4>
 <p>&lt;ng-template&gt; element</p>
@@ -72,7 +63,7 @@
   and continued on my way.
 </p>
 <!-- #enddocregion ngif-ngcontainer -->
-<!-- #docregion ngif-span -->
+
 <p>
   I turned the corner
   <span *ngIf="hero">
@@ -80,10 +71,9 @@
   </span>
   and continued on my way.
 </p>
-<!-- #enddocregion ngif-span -->
 
 <p><i>&lt;select&gt; with &lt;span&gt;</i></p>
-<!-- #docregion select-span -->
+
 <div>
   Pick your favorite hero
   (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
@@ -95,7 +85,6 @@
     </span>
   </span>
 </select>
-<!-- #enddocregion select-span -->
 
 <p><i>&lt;select&gt; with &lt;ng-container&gt;</i></p>
 <!-- #docregion select-ngcontainer -->
@@ -148,17 +137,14 @@
 
 <h4>NgSwitch</h4>
 
-<!-- #docregion built-in , ngswitch -->
 <div [ngSwitch]="hero?.emotion">
   <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
   <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
   <app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
   <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
 </div>
-<!-- #enddocregion built-in, ngswitch -->
 
 <h4>NgSwitch with &lt;ng-template&gt;</h4>
-<!-- #docregion ngswitch-template -->
 <div [ngSwitch]="hero?.emotion">
   <ng-template [ngSwitchCase]="'happy'">
     <app-happy-hero [hero]="hero"></app-happy-hero>
@@ -173,7 +159,6 @@
     <app-unknown-hero [hero]="hero"></app-unknown-hero>
   </ng-template>
 </div>
-<!-- #enddocregion ngswitch-template -->
 
 <hr>
 
@@ -189,6 +174,7 @@
 <hr>
 
 <h2 id="appUnless">UnlessDirective</h2>
+<!-- #docregion toggle-info -->
 <p>
   The condition is currently
   <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
@@ -198,6 +184,8 @@
     Toggle condition to {{condition ? 'false' : 'true'}}
   </button>
 </p>
+<!-- #enddocregion toggle-info -->
+
 <!-- #docregion appUnless-->
 <p *appUnless="condition" class="unless a">
   (A) This paragraph is displayed because the condition is false.
diff --git a/aio/content/examples/structural-directives/src/app/app.component.ts b/aio/content/examples/structural-directives/src/app/app.component.ts
index aed11fc77a..c30efc576a 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.ts
+++ b/aio/content/examples/structural-directives/src/app/app.component.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { Component } from '@angular/core';
 
 import { Hero, heroes } from './hero';
@@ -11,13 +10,12 @@ import { Hero, heroes } from './hero';
 export class AppComponent {
   heroes = heroes;
   hero = this.heroes[0];
-
+  // #docregion condition
   condition = false;
+  // #enddocregion condition
   logs: string[] = [];
   showSad = true;
   status = 'ready';
 
-  // #docregion trackByHero
   trackById(index: number, hero: Hero): number { return hero.id; }
-  // #enddocregion trackByHero
 }
diff --git a/aio/content/examples/styleguide/src/04-10/app/app.module.ts b/aio/content/examples/styleguide/src/04-10/app/app.module.ts
index 1e597e19b8..6810d361fe 100644
--- a/aio/content/examples/styleguide/src/04-10/app/app.module.ts
+++ b/aio/content/examples/styleguide/src/04-10/app/app.module.ts
@@ -1,11 +1,6 @@
-// #docplaster
-// #docregion
-// #docregion example
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-// #enddocregion example
 import { RouterModule } from '@angular/router';
-// #docregion example
 
 import { AppComponent } from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
@@ -15,9 +10,7 @@ import { SharedModule } from './shared/shared.module';
   imports: [
     BrowserModule,
     SharedModule,
-// #enddocregion example
     RouterModule.forChild([{ path: '04-10', component: AppComponent }])
-// #docregion example
   ],
   declarations: [
     AppComponent,
@@ -27,4 +20,3 @@ import { SharedModule } from './shared/shared.module';
   entryComponents: [ AppComponent ]
 })
 export class AppModule {}
-// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/04-11/app/app.module.ts b/aio/content/examples/styleguide/src/04-11/app/app.module.ts
index a4abbd7263..9d771af068 100644
--- a/aio/content/examples/styleguide/src/04-11/app/app.module.ts
+++ b/aio/content/examples/styleguide/src/04-11/app/app.module.ts
@@ -1,11 +1,6 @@
-// #docplaster
-// #docregion
-// #docregion example
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-// #enddocregion example
 import { RouterModule } from '@angular/router';
-// #docregion example
 
 import { AppComponent } from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
@@ -15,9 +10,7 @@ import { CoreModule } from './core/core.module';
   imports: [
     BrowserModule,
     CoreModule,
-// #enddocregion example
     RouterModule.forChild([{ path: '04-11', component: AppComponent }])
-// #docregion example
   ],
   declarations: [
     AppComponent,
@@ -27,4 +20,3 @@ import { CoreModule } from './core/core.module';
   entryComponents: [ AppComponent ]
 })
 export class AppModule {}
-// #enddocregion example
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css
index 192d4a06c8..bd1713828d 100644
--- a/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css
+++ b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css
@@ -7,13 +7,9 @@
   height: .3em;
   width: 6em;
   margin:-60px 0 0 -60px;
-  -webkit-animation:spin 4s linear infinite;
-  -moz-animation:spin 4s linear infinite;
   animation:spin 4s linear infinite;
 }
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+@keyframes spin { 100% { transform:rotate(360deg); } }
 
 .spinner-hidden {
   display:none;
diff --git a/aio/content/examples/styleguide/src/04-12/app/app.module.ts b/aio/content/examples/styleguide/src/04-12/app/app.module.ts
index c51d7d10eb..a8519ce8df 100644
--- a/aio/content/examples/styleguide/src/04-12/app/app.module.ts
+++ b/aio/content/examples/styleguide/src/04-12/app/app.module.ts
@@ -1,11 +1,6 @@
-// #docplaster
-// #docregion
-// #docregion example
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-// #enddocregion example
 import { RouterModule } from '@angular/router';
-// #docregion example
 
 import { AppComponent } from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
@@ -15,9 +10,7 @@ import { CoreModule } from './core/core.module';
   imports: [
     BrowserModule,
     CoreModule,
-// #enddocregion example
     RouterModule.forChild([{ path: '04-12', component: AppComponent }])
-// #docregion example
   ],
   declarations: [
     AppComponent,
@@ -27,4 +20,3 @@ import { CoreModule } from './core/core.module';
   entryComponents: [ AppComponent ]
 })
 export class AppModule {}
-// #enddocregion example
diff --git a/aio/content/examples/template-expression-operators/src/app/app.component.html b/aio/content/examples/template-expression-operators/src/app/app.component.html
index ec7d8dd06e..512c5ef2db 100644
--- a/aio/content/examples/template-expression-operators/src/app/app.component.html
+++ b/aio/content/examples/template-expression-operators/src/app/app.component.html
@@ -3,36 +3,22 @@
 <hr />
 
 <h2 id="pipes">Pipes</h2>
-<!-- #docregion uppercase-pipe-->
 <p>Title through uppercase pipe: {{title | uppercase}}</p>
-<!-- #enddocregion uppercase-pipe-->
-<!-- #docregion pipe-chain-->
 <!-- convert title to uppercase, then to lowercase -->
 <p>Title through a pipe chain: {{title | uppercase | lowercase}}</p>
-<!-- #enddocregion pipe-chain-->
 
-<!-- #docregion date-pipe -->
 <!-- pipe with configuration argument => "February 25, 1980" -->
 <p>Manufacture date with date format pipe: {{item.manufactureDate | date:'longDate'}}</p>
-<!-- #enddocregion date-pipe -->
 <p>Manufacture date with uppercase pipe: {{(item.manufactureDate | date:'longDate') | uppercase}}</p>
-<!-- #docregion json-pipe -->
 <p>Item json pipe: {{item | json}}</p>
-<!-- #enddocregion json-pipe -->
 
-<!-- #docregion currency-pipe -->
 <p>Price with currency pipe: {{item.price | currency:'USD'}}</p>
-<!-- #enddocregion currency-pipe -->
 <hr />
 
 <h2>Safe navigation operator: <code>?</code> and <code>null</code></h2>
-<!-- #docregion safe -->
 <p>The item name is: {{item?.name}}</p>
-<!-- #enddocregion safe -->
 
-<!-- #docregion safe-null -->
 <p>The nullItem name is: {{nullItem?.name}}</p>
-<!-- #enddocregion safe-null -->
 
 <hr />
 
diff --git a/aio/content/examples/template-reference-variables/src/app/app.component.html b/aio/content/examples/template-reference-variables/src/app/app.component.html
index 5458d96ad3..6943468a5f 100644
--- a/aio/content/examples/template-reference-variables/src/app/app.component.html
+++ b/aio/content/examples/template-reference-variables/src/app/app.component.html
@@ -16,10 +16,8 @@
 </div>
 
 <div>
-  <!-- #docregion ref-fax -->
   <input ref-fax placeholder="fax number" />
   <button (click)="callFax(fax.value)">Fax</button>
-  <!-- #enddocregion ref-fax -->
 </div>
 
 <hr />
@@ -84,11 +82,9 @@ not work. The value to the right is empty and changing the
 value of the input will have no effect. -->
 
 <div class="example">
-  <!-- #docregion template-ref-vars-scope2 -->
   <input *ngIf="true" #ref2 type="text" [(ngModel)]="secondExample" />
   <!-- <span>Value: {{ ref2?.value }}</span> -->
   <!-- uncomment the above and the app breaks -->
-  <!-- #enddocregion template-ref-vars-scope2 -->
 </div>
 
 <p>Here's the desugared syntax:</p>
diff --git a/aio/content/examples/template-syntax/src/app/app.component.css b/aio/content/examples/template-syntax/src/app/app.component.css
index 23f9667623..01163bffbc 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.css
+++ b/aio/content/examples/template-syntax/src/app/app.component.css
@@ -11,7 +11,7 @@ img {height: 100px;}
 .special {font-weight:bold; font-size: x-large}
 .bad {color: red;}
 .saveable {color: limegreen;}
-.curly, .modified {font-family: "Brush Script MT"}
+.curly, .modified {font-family: "Brush Script MT", cursive}
 .toe {margin-left: 1em; font-style: italic;}
 little-hero {color:blue; font-size: smaller; background-color: Turquoise }
 .to-toc {margin-top: 10px; display: block}
diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html
index 9098fbc26e..59fa05b1c1 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.html
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -43,26 +43,18 @@
 <!-- Interpolation and expressions -->
 <hr><h2 id="interpolation">Interpolation</h2>
 
-<!-- #docregion first-interpolation -->
 <p>My current hero is {{currentHero.name}}</p>
-<!-- #enddocregion first-interpolation -->
 
-<!-- #docregion title+image -->
 <h3>
   {{title}}
   <img src="{{heroImageUrl}}" style="height:30px">
 </h3>
-<!-- #enddocregion title+image -->
 
-<!-- #docregion sum-1 -->
 <!-- "The sum of 1 + 1 is 2" -->
 <p>The sum of 1 + 1 is {{1 + 1}}</p>
-<!-- #enddocregion sum-1 -->
 
-<!-- #docregion sum-2 -->
 <!-- "The sum of 1 + 1 is not 4" -->
 <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
-<!-- #enddocregion sum-2 -->
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -70,27 +62,21 @@
 
 <p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
 <div class="context">
-  <!-- #docregion context-component-expression -->
   {{title}}
   <span [hidden]="isUnchanged">changed</span>
-  <!-- #enddocregion context-component-expression -->
 </div>
 
 
 <p>Template input variable expression context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
 <ng-template>
-  <!-- #docregion context-var -->
   <div *ngFor="let hero of heroes">{{hero.name}}</div>
-  <!-- #enddocregion context-var -->
 </ng-template>
 
 <p>Template reference variable expression context (#heroInput)</p>
 <div (keyup)="0" class="context">
   Type something:
-  <!-- #docregion context-var -->
   <input #heroInput> {{heroInput.value}}
-  <!-- #enddocregion context-var -->
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -133,28 +119,22 @@
 
 <!--<img src="https://wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
 <!-- Public Domain terms of use: https://wpclipart.com/terms.html -->
-<!-- #docregion img+button -->
 <div class="special">Mental Model</div>
 <img src="assets/images/hero.png">
 <button disabled>Save</button>
-<!-- #enddocregion img+button -->
 <br><br>
 
 <div>
-  <!-- #docregion hero-detail-1 -->
   <!-- Normal HTML -->
   <div class="special">Mental Model</div>
   <!-- Wow! A new element! -->
   <app-hero-detail></app-hero-detail>
-  <!-- #enddocregion hero-detail-1 -->
 </div>
 <br><br>
 
 <div>
-  <!-- #docregion disabled-button-1 -->
   <!-- Bind button disabled state to `isUnchanged` property -->
   <button [disabled]="isUnchanged">Save</button>
-  <!-- #enddocregion disabled-button-1 -->
 </div>
 <br><br>
 
@@ -233,51 +213,29 @@ button</button>
 <!-- property binding -->
 <hr><h2 id="property-binding">Property Binding</h2>
 
-<!-- #docregion property-binding-1 -->
 <img [src]="heroImageUrl">
-<!-- #enddocregion property-binding-1 -->
-<!-- #docregion property-binding-2 -->
 <button [disabled]="isUnchanged">Cancel is disabled</button>
-<!-- #enddocregion property-binding-2 -->
-<!-- #docregion property-binding-3 -->
 <div [ngClass]="classes">[ngClass] binding to the classes property</div>
-<!-- #enddocregion property-binding-3 -->
-<!-- #docregion property-binding-4 -->
 <app-hero-detail [hero]="currentHero"></app-hero-detail>
-<!-- #enddocregion property-binding-4 -->
-<!-- #docregion property-binding-5 -->
 <img bind-src="heroImageUrl">
-<!-- #enddocregion property-binding-5 -->
 
-<!-- #docregion property-binding-6 -->
-<!-- ERROR: HeroDetailComponent.hero expects a
-     Hero object, not the string "currentHero" -->
-<!-- #enddocregion property-binding-6 -->
-<div *ngIf="false">
-<!-- #docregion property-binding-6 -->
-  <app-hero-detail hero="currentHero"></app-hero-detail>
-<!-- #enddocregion property-binding-6 -->
-</div>
-<!-- #docregion property-binding-7 -->
+<!-- ERROR: HeroDetailComponent.hero expects a Hero object, not the string "currentHero" -->
+<!-- <app-hero-detail hero="currentHero"></app-hero-detail> -->
+
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
-<!-- #enddocregion property-binding-7 -->
 
-<!-- #docregion property-binding-vs-interpolation -->
 <p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
 <p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
 
 <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
-<!-- #enddocregion property-binding-vs-interpolation -->
 
-<!-- #docregion property-binding-vs-interpolation-sanitization -->
 <!--
   Angular generates warnings for these two lines as it sanitizes them
   WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
  -->
 <p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
 <p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
-<!-- #enddocregion property-binding-vs-interpolation-sanitization -->
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -285,7 +243,6 @@ button</button>
 <hr><h2 id="attribute-binding">Attribute Binding</h2>
 
 <!--  create and set a colspan attribute -->
-<!-- #docregion attrib-binding-colspan -->
 <table border=1>
   <!--  expression calculates colspan=2 -->
   <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
@@ -296,13 +253,10 @@ button</button>
 
   <tr><td>Five</td><td>Six</td></tr>
 </table>
-<!-- #enddocregion attrib-binding-colspan -->
 
 <br>
-<!-- #docregion attrib-binding-aria -->
 <!-- create and set an aria attribute for assistive technology -->
 <button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
-<!-- #enddocregion attrib-binding-aria -->
 <br><br>
 
 <!-- The following effects are not discussed in the chapter -->
@@ -321,27 +275,19 @@ button</button>
 <!-- class binding -->
 <hr><h2 id="class-binding">Class Binding</h2>
 
-<!-- #docregion class-binding-1 -->
 <!-- standard class attribute setting  -->
 <div class="bad curly special">Bad curly special</div>
-<!-- #enddocregion class-binding-1 -->
 
-<!-- #docregion class-binding-2 -->
 <!-- reset/override all class names with a binding  -->
 <div class="bad curly special"
      [class]="badCurly">Bad curly</div>
-<!-- #enddocregion class-binding-2 -->
 
-<!-- #docregion class-binding-3 -->
-<!-- #docregion class-binding-3a -->
 <!-- toggle the "special" class on/off with a property -->
 <div [class.special]="isSpecial">The class binding is special</div>
-<!-- #enddocregion class-binding-3a -->
 
 <!-- binding to `class.special` trumps the class attribute -->
 <div class="special"
      [class.special]="!isSpecial">This one is not so special</div>
-<!-- #enddocregion class-binding-3 -->
 
 <div bind-class.special="isSpecial">This class binding is special too</div>
 
@@ -350,44 +296,30 @@ button</button>
 <!--style binding -->
 <hr><h2 id="style-binding">Style Binding</h2>
 
-<!-- #docregion style-binding-1 -->
 <button [style.color]="isSpecial ? 'red': 'green'">Red</button>
 <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
-<!-- #enddocregion style-binding-1 -->
 
-<!-- #docregion style-binding-2 -->
 <button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
 <button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
-<!-- #enddocregion style-binding-2 -->
 
 <a class="to-toc" href="#toc">top</a>
 
 <!-- event binding -->
 <hr><h2 id="event-binding">Event Binding</h2>
 
-<!-- #docregion event-binding-1 -->
 <button (click)="onSave()">Save</button>
-<!-- #enddocregion event-binding-1 -->
 
-<!-- #docregion event-binding-2 -->
 <button on-click="onSave()">On Save</button>
-<!-- #enddocregion event-binding-2 -->
 
 <div>
-<!-- #docregion event-binding-3 -->
 <!-- `myClick` is an event on the custom `ClickDirective` -->
-<!-- #docregion myClick -->
 <div (myClick)="clickMessage=$event" clickable>click with myClick</div>
-<!-- #enddocregion myClick -->
-<!-- #enddocregion event-binding-3 -->
 {{clickMessage}}
 </div>
 
 
 <!-- binding to a nested component -->
-<!-- #docregion event-binding-to-component -->
 <app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
-<!-- #enddocregion event-binding-to-component -->
 <br>
 
 <app-big-hero-detail
@@ -395,42 +327,32 @@ button</button>
     [hero]="currentHero">
 </app-big-hero-detail>
 
-<!-- #docregion event-binding-bubbling -->
 <div class="parent-div" (click)="onClickMe($event)" clickable>Click me
   <div class="child-div">Click me too!</div>
 </div>
-<!-- #enddocregion event-binding-bubbling -->
 
-<!-- #docregion event-binding-no-propagation -->
 <!-- Will save only once -->
 <div (click)="onSave()" clickable>
   <button (click)="onSave($event)">Save, no propagation</button>
 </div>
-<!-- #enddocregion event-binding-no-propagation -->
 
-<!-- #docregion event-binding-propagation -->
 <!-- Will save twice -->
 <div (click)="onSave()" clickable>
   <button (click)="onSave()">Save w/ propagation</button>
 </div>
-<!-- #enddocregion event-binding-propagation -->
 
 <a class="to-toc" href="#toc">top</a>
 
 <hr><h2 id="two-way">Two-way Binding</h2>
 <div id="two-way-1">
-  <!-- #docregion two-way-1 -->
   <app-sizer [(size)]="fontSizePx"></app-sizer>
   <div [style.font-size.px]="fontSizePx">Resizable Text</div>
-  <!-- #enddocregion two-way-1 -->
   <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
 </div>
 <br>
 <div id="two-way-2">
   <h3>De-sugared two-way binding</h3>
-  <!-- #docregion two-way-2 -->
   <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
-  <!-- #enddocregion two-way-2 -->
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -441,34 +363,24 @@ button</button>
 
 <h3>Result: {{currentHero.name}}</h3>
 
-<!-- #docregion without-NgModel -->
 <input [value]="currentHero.name"
        (input)="updateCurrentHeroName($event)">
-<!-- #enddocregion without-NgModel -->
 without NgModel
 <br>
-<!-- #docregion NgModel-1 -->
 <input [(ngModel)]="currentHero.name">
-<!-- #enddocregion NgModel-1 -->
 [(ngModel)]
 <br>
-<!-- #docregion NgModel-2 -->
 <input bindon-ngModel="currentHero.name">
-<!-- #enddocregion NgModel-2 -->
 bindon-ngModel
 <br>
-<!-- #docregion NgModel-3 -->
 <input
   [ngModel]="currentHero.name"
   (ngModelChange)="currentHero.name=$event">
-<!-- #enddocregion NgModel-3 -->
 (ngModelChange)="...name=$event"
 <br>
-<!-- #docregion NgModel-4 -->
 <input
   [ngModel]="currentHero.name"
   (ngModelChange)="setUppercaseName($event)">
-<!-- #enddocregion NgModel-4 -->
 (ngModelChange)="setUppercaseName($event)"
 
 <a class="to-toc" href="#toc">top</a>
@@ -477,9 +389,7 @@ bindon-ngModel
 <hr><h2 id="ngClass">NgClass Binding</h2>
 
 <p>currentClasses is {{currentClasses | json}}</p>
-<!-- #docregion NgClass-1 -->
 <div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
-<!-- #enddocregion NgClass-1 -->
 
 <!-- not used in chapter -->
 <br>
@@ -504,19 +414,15 @@ bindon-ngModel
 <!-- NgStyle binding -->
 <hr><h2 id="ngStyle">NgStyle Binding</h2>
 
-<!-- #docregion NgStyle-1 -->
 <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
   This div is x-large or smaller.
 </div>
-<!-- #enddocregion NgStyle-1 -->
 
 <h3>[ngStyle] binding to currentStyles - CSS property names</h3>
 <p>currentStyles is {{currentStyles | json}}</p>
-<!-- #docregion NgStyle-2 -->
 <div [ngStyle]="currentStyles">
   This div is initially italic, normal weight, and extra large (24px).
 </div>
-<!-- #enddocregion NgStyle-2 -->
 
 <!-- not used in chapter -->
 <br>
@@ -535,14 +441,10 @@ bindon-ngModel
 <!-- NgIf binding -->
 <hr><h2 id="ngIf">NgIf Binding</h2>
 
-<!-- #docregion NgIf-1 -->
 <app-hero-detail *ngIf="isActive"></app-hero-detail>
-<!-- #enddocregion NgIf-1 -->
 
-<!-- #docregion NgIf-2 -->
 <div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
 <div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
-<!-- #enddocregion NgIf-2 -->
 
 <!-- NgIf binding with template (no *) -->
 
@@ -554,7 +456,6 @@ bindon-ngModel
   <app-hero-detail></app-hero-detail>
 </ng-template>
 
-<!-- #docregion NgIf-3 -->
 <!-- isSpecial is true -->
 <div [class.hidden]="!isSpecial">Show with class</div>
 <div [class.hidden]="isSpecial">Hide with class</div>
@@ -564,7 +465,6 @@ bindon-ngModel
 
 <div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
 <div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>
-<!-- #enddocregion NgIf-3 -->
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -572,17 +472,13 @@ bindon-ngModel
 <hr><h2 id="ngFor">NgFor Binding</h2>
 
 <div class="box">
-  <!-- #docregion NgFor-1, NgFor-1-2 -->
   <div *ngFor="let hero of heroes">{{hero.name}}</div>
-  <!-- #enddocregion NgFor-1, NgFor-1-2 -->
 </div>
 <br>
 
 <div class="box">
   <!-- *ngFor w/ hero-detail Component -->
-  <!-- #docregion NgFor-2, NgFor-1-2 -->
   <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
-  <!-- #enddocregion NgFor-2, NgFor-1-2 -->
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -590,9 +486,7 @@ bindon-ngModel
 <h4 id="ngFor-index">*ngFor with index</h4>
 <p>with <i>semi-colon</i> separator</p>
 <div class="box">
-  <!-- #docregion NgFor-3 -->
   <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
-  <!-- #enddocregion NgFor-3 -->
 </div>
 
 <p>with <i>comma</i> separator</p>
@@ -630,11 +524,9 @@ bindon-ngModel
 
 <p>with trackBy and <i>semi-colon</i> separator</p>
 <div class="box">
-  <!-- #docregion trackBy -->
   <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
     ({{hero.id}}) {{hero.name}}
   </div>
-  <!-- #enddocregion trackBy -->
 </div>
 
 <p>with trackBy and <i>comma</i> separator</p>
@@ -664,40 +556,28 @@ bindon-ngModel
   </label>
 </div>
 
-<!-- #docregion NgSwitch -->
 <div [ngSwitch]="currentHero.emotion">
   <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
   <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
   <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
-<!-- #enddocregion NgSwitch -->
-  <!-- #docregion NgSwitch-div -->
   <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
-  <!-- #enddocregion NgSwitch-div -->
-<!-- #docregion NgSwitch -->
   <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
 </div>
-<!-- #enddocregion NgSwitch -->
 
 <a class="to-toc" href="#toc">top</a>
 
 <!-- template reference variable -->
 <hr><h2 id="ref-vars">Template reference variables</h2>
 
-<!-- #docregion ref-phone -->
-<!-- #docregion ref-var -->
 <input #phone placeholder="phone number">
-<!-- #enddocregion ref-var -->
 
 <!-- lots of other elements -->
 
 <!-- phone refers to the input element; pass its `value` to an event handler -->
 <button (click)="callPhone(phone.value)">Call</button>
-<!-- #enddocregion ref-phone -->
 
-<!-- #docregion ref-fax -->
 <input ref-fax placeholder="fax number">
 <button (click)="callFax(fax.value)">Fax</button>
-<!-- #enddocregion ref-fax -->
 
 <!-- btn refers to the button element; show its disabled state -->
 <button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
@@ -710,15 +590,11 @@ bindon-ngModel
 <!-- inputs and output -->
 <hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>
 
-<!-- #docregion io-1 -->
 <img [src]="iconUrl"/>
 <button (click)="onSave()">Save</button>
-<!-- #enddocregion io-1 -->
 
-<!-- #docregion io-2 -->
 <app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
 </app-hero-detail>
-<!-- #enddocregion io-2 -->
 
 <div (myClick)="clickMessage2=$event" clickable>myClick2</div>
 {{clickMessage2}}
@@ -728,26 +604,18 @@ bindon-ngModel
 <!-- Pipes -->
 <hr><h2 id="pipes">Pipes</h2>
 
-<!-- #docregion pipes-1 -->
 <div>Title through uppercase pipe: {{title | uppercase}}</div>
-<!-- #enddocregion pipes-1 -->
 
-<!-- #docregion pipes-2 -->
 <!-- Pipe chaining: convert title to uppercase, then to lowercase -->
 <div>
   Title through a pipe chain:
   {{title | uppercase | lowercase}}
 </div>
-<!-- #enddocregion pipes-2 -->
 
-<!-- #docregion pipes-3 -->
 <!-- pipe with configuration argument => "February 25, 1970" -->
 <div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>
-<!-- #enddocregion pipes-3 -->
 
-<!-- #docregion pipes-json -->
 <div>{{currentHero | json}}</div>
-<!-- #enddocregion pipes-json -->
 
 <div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
 
@@ -762,21 +630,15 @@ bindon-ngModel
 <hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
 
 <div>
-  <!-- #docregion safe-1 -->
   The title is {{title}}
-  <!-- #enddocregion safe-1 -->
 </div>
 
 <div>
-  <!-- #docregion safe-2 -->
   The current hero's name is {{currentHero?.name}}
-  <!-- #enddocregion safe-2 -->
 </div>
 
 <div>
-  <!-- #docregion safe-3 -->
   The current hero's name is {{currentHero.name}}
-  <!-- #enddocregion safe-3 -->
 </div>
 
 
@@ -787,22 +649,16 @@ See console log:
   TypeError: Cannot read property 'name' of null in [null]
 -->
 
-<!-- #docregion safe-4 -->
 <!--No hero, div not displayed, no error -->
 <div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
-<!-- #enddocregion safe-4 -->
 
 <div>
-<!-- #docregion safe-5 -->
 The null hero's name is {{nullHero && nullHero.name}}
-<!-- #enddocregion safe-5 -->
 </div>
 
 <div>
-  <!-- #docregion safe-6 -->
   <!-- No hero, no problem! -->
   The null hero's name is {{nullHero?.name}}
-  <!-- #enddocregion safe-6 -->
 </div>
 
 
@@ -812,12 +668,10 @@ The null hero's name is {{nullHero && nullHero.name}}
 <hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
 
 <div>
-  <!-- #docregion non-null-assertion-1 -->
   <!--No hero, no text -->
   <div *ngIf="hero">
     The hero's name is {{hero!.name}}
   </div>
-  <!-- #enddocregion non-null-assertion-1 -->
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -826,21 +680,17 @@ The null hero's name is {{nullHero && nullHero.name}}
 <hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
 
 <div>
-  <!-- #docregion any-type-cast-function-1 -->
   <!-- Accessing an undeclared member -->
   <div>
     The hero's marker is {{$any(hero).marker}}
   </div>
-  <!-- #enddocregion any-type-cast-function-1 -->
 </div>
 
 <div>
-  <!-- #docregion any-type-cast-function-2 -->
   <!-- Accessing an undeclared member -->
   <div>
     Undeclared members is {{$any(this).member}}
   </div>
-  <!-- #enddocregion any-type-cast-function-2 -->
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -850,17 +700,13 @@ The null hero's name is {{nullHero && nullHero.name}}
 <hr><h2 id="enums">Enums in binding</h2>
 
 <p>
-  <!-- #docregion enums -->
   The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
   The current color is {{Color[color]}} and its number is {{color}}.<br>
   <button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
-  <!-- #enddocregion enums -->
 </p>
 
 <a class="to-toc" href="#toc">top</a>
 
 <hr><h2 id="svg-templates">SVG Templates</h2>
-<!-- #docregion svg-templates -->
 <app-svg></app-svg>
-<!-- #enddocregion svg-templates -->
 <a class="to-toc" href="#toc">top</a>
diff --git a/aio/content/examples/template-syntax/src/app/app.component.ts b/aio/content/examples/template-syntax/src/app/app.component.ts
index ab20277906..784e1f6696 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.ts
+++ b/aio/content/examples/template-syntax/src/app/app.component.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:forin member-ordering */
-// #docplaster
 
 import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';
 
@@ -74,9 +73,7 @@ export class AppComponent implements AfterViewInit, OnInit {
     this.alert(`Delete ${hero ? hero.name : 'the hero'}.`);
   }
 
-  // #docregion evil-title
   evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
-  // #enddocregion evil-title
 
   fontSizePx = 16;
 
@@ -139,7 +136,6 @@ export class AppComponent implements AfterViewInit, OnInit {
     this.currentHero.name = name.toUpperCase();
   }
 
-  // #docregion setClasses
   currentClasses: {};
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
@@ -149,9 +145,7 @@ export class AppComponent implements AfterViewInit, OnInit {
       special:  this.isSpecial
     };
   }
-  // #enddocregion setClasses
 
-  // #docregion setStyles
   currentStyles: {};
   setCurrentStyles() {
     // CSS styles: set per current state of component properties
@@ -161,15 +155,10 @@ export class AppComponent implements AfterViewInit, OnInit {
       'font-size':   this.isSpecial    ? '24px'   : '12px'
     };
   }
-  // #enddocregion setStyles
 
-  // #docregion trackByHeroes
   trackByHeroes(index: number, hero: Hero): number { return hero.id; }
-  // #enddocregion trackByHeroes
 
-  // #docregion trackById
   trackById(index: number, item: any): number { return item.id; }
-  // #enddocregion trackById
 }
 
 // helper to track changes to viewChildren
diff --git a/aio/content/examples/template-syntax/src/app/click.directive.ts b/aio/content/examples/template-syntax/src/app/click.directive.ts
index e2eeeee105..bc0ead0544 100644
--- a/aio/content/examples/template-syntax/src/app/click.directive.ts
+++ b/aio/content/examples/template-syntax/src/app/click.directive.ts
@@ -1,12 +1,9 @@
 /* tslint:disable directive-selector directive-class-suffix */
-// #docplaster
 import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
 
 @Directive({selector: '[myClick]'})
 export class ClickDirective {
-  // #docregion output-myClick
   @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
-  // #enddocregion output-myClick
 
   toggle = false;
 
@@ -19,15 +16,11 @@ export class ClickDirective {
   }
 }
 
-// #docregion output-myClick2
 @Directive({
-  // #enddocregion output-myClick2
   selector: '[myClick2]',
   // tslint:disable: no-outputs-metadata-property
-  // #docregion output-myClick2
   outputs: ['clicks:myClick']  // propertyName:alias
 })
-// #enddocregion output-myClick2
 // tslint:enable: no-outputs-metadata-property
 export class ClickDirective2 {
   clicks = new EventEmitter<string>();
diff --git a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
index 4764274491..1ec221c35f 100644
--- a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
+++ b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
@@ -1,21 +1,15 @@
 /* tslint:disable use-input-property-decorator use-output-property-decorator */
-// #docplaster
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { Hero } from './hero';
 
-// #docregion input-output-2
 @Component({
-// #enddocregion input-output-2
   selector: 'app-hero-detail',
   // tslint:disable: no-inputs-metadata-property no-outputs-metadata-property
-  // #docregion input-output-2
   inputs: ['hero'],
   outputs: ['deleteRequest'],
-  // #enddocregion input-output-2
   // tslint:enable: no-inputs-metadata-property no-outputs-metadata-property
   styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
-  // #docregion template-1
   template: `
   <div>
     <img src="{{heroImageUrl}}">
@@ -24,10 +18,7 @@ import { Hero } from './hero';
     </span>
     <button (click)="delete()">Delete</button>
   </div>`
-  // #enddocregion template-1
-// #docregion input-output-2
 })
-// #enddocregion input-output-2
 export class HeroDetailComponent {
   hero: Hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero
   // heroImageUrl = 'https://wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
@@ -36,17 +27,13 @@ export class HeroDetailComponent {
   lineThrough = '';
   @Input() prefix = '';
 
-  // #docregion deleteRequest
   // This component makes a request but it can't actually delete a hero.
   deleteRequest = new EventEmitter<Hero>();
 
   delete() {
     this.deleteRequest.emit(this.hero);
-    // #enddocregion deleteRequest
     this.lineThrough = this.lineThrough ? '' : 'line-through';
-    // #docregion deleteRequest
   }
-  // #enddocregion deleteRequest
 }
 
 @Component({
@@ -71,10 +58,8 @@ export class HeroDetailComponent {
 })
 export class BigHeroDetailComponent extends HeroDetailComponent {
 
-  // #docregion input-output-1
   @Input()  hero: Hero;
   @Output() deleteRequest = new EventEmitter<Hero>();
-  // #enddocregion input-output-1
 
   delete() {
     this.deleteRequest.emit(this.hero);
diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
index 8e52947d4e..6ded93febf 100644
--- a/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
+++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
@@ -1,14 +1,14 @@
 // #docplaster
-// #docregion import-by
-// #enddocregion import-by
 // #docregion import-debug-element
 import { DebugElement } from '@angular/core';
 // #enddocregion import-debug-element
 // #docregion v1
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 
 // #enddocregion v1
+// #docregion import-by
+import { By } from '@angular/platform-browser';
+// #enddocregion import-by
 import { BannerComponent } from './banner-initial.component';
 
 /*
@@ -56,7 +56,7 @@ describe('BannerComponent (minimal)', () => {
 });
 // #enddocregion v2
 
-// #docregion v3, v4
+// #docregion v3
 describe('BannerComponent (with beforeEach)', () => {
   let component: BannerComponent;
   let fixture: ComponentFixture<BannerComponent>;
@@ -111,4 +111,4 @@ describe('BannerComponent (with beforeEach)', () => {
   // #enddocregion v4-test-5
   // #docregion v3
 });
-// #enddocregion v3, v4
+// #enddocregion v3
diff --git a/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
index a3f0e58979..468e11bb8a 100644
--- a/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
+++ b/aio/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
@@ -1,8 +1,6 @@
 // #docplaster
 // #docregion
-// #docregion import-async
 import { async } from '@angular/core/testing';
-// #enddocregion import-async
 // #docregion import-ComponentFixtureAutoDetect
 import { ComponentFixtureAutoDetect } from '@angular/core/testing';
 // #enddocregion import-ComponentFixtureAutoDetect
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.css b/aio/content/examples/testing/src/app/dashboard/dashboard.component.css
index ce7eb46e35..0d4eebcdff 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.css
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.css
@@ -1,9 +1,7 @@
 [class*='col-'] {
   float: left;
 }
-*, *:after, *:before {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
+*, *::after, *::before {
 	box-sizing: border-box;
 }
 h3 {
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
index 0714a463b9..5bf7967e6b 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
@@ -57,7 +57,6 @@ describe('DashboardComponent (shallow)', () => {
 
 /** Add TestBed providers, compile, and create DashboardComponent */
 function compileAndCreate() {
-  // #docregion compile-and-create-body
   beforeEach(waitForAsync(() => {
     // #docregion router-spy
     const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
@@ -78,7 +77,6 @@ function compileAndCreate() {
           // getHeroes spy returns observable of test heroes
           heroServiceSpy.getHeroes.and.returnValue(asyncData(getTestHeroes()));
         });
-    // #enddocregion compile-and-create-body
   }));
 }
 
diff --git a/aio/content/examples/testing/src/app/demo/async-helper.spec.ts b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
index 18a793d1a6..7b48af2c87 100644
--- a/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
+++ b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
@@ -1,7 +1,7 @@
 // tslint:disable-next-line:no-unused-variable
-import { fakeAsync, tick, waitForAsync } from '@angular/core/testing';
-import { interval, of } from 'rxjs';
-import { delay, take } from 'rxjs/operators';
+import {fakeAsync, tick, waitForAsync} from '@angular/core/testing';
+import {interval, of} from 'rxjs';
+import {delay, take} from 'rxjs/operators';
 
 describe('Angular async helper', () => {
   describe('async', () => {
@@ -131,7 +131,7 @@ describe('Angular async helper', () => {
 
     // #docregion fake-async-test-rxjs
     it('should get Date diff correctly in fakeAsync with rxjs scheduler', fakeAsync(() => {
-         // need to add `import 'zone.js/dist/zone-patch-rxjs-fake-async'
+         // need to add `import 'zone.js/plugins/zone-patch-rxjs-fake-async'
          // to patch rxjs scheduler
          let result = null;
          of('hello').pipe(delay(1000)).subscribe(v => {
@@ -156,7 +156,7 @@ describe('Angular async helper', () => {
   // #docregion fake-async-test-clock
   describe('use jasmine.clock()', () => {
     // need to config __zone_symbol__fakeAsyncPatchLock flag
-    // before loading zone.js/dist/zone-testing
+    // before loading zone.js/testing
     beforeEach(() => {
       jasmine.clock().install();
     });
@@ -175,16 +175,15 @@ describe('Angular async helper', () => {
   });
   // #enddocregion fake-async-test-clock
 
-  // #docregion async-test-promise-then
   describe('test jsonp', () => {
     function jsonp(url: string, callback: () => void) {
       // do a jsonp call which is not zone aware
     }
     // need to config __zone_symbol__supportWaitUnResolvedChainedPromise flag
-    // before loading zone.js/dist/zone-testing
+    // before loading zone.js/testing
     it('should wait until promise.then is called', waitForAsync(() => {
          let finished = false;
-         new Promise((res, rej) => {
+         new Promise<void>(res => {
            jsonp('localhost:8080/jsonp', () => {
              // success callback and resolve the promise
              finished = true;
@@ -197,5 +196,4 @@ describe('Angular async helper', () => {
          });
        }));
   });
-  // #enddocregion async-test-promise-then
 });
diff --git a/aio/content/examples/testing/src/app/demo/demo.spec.ts b/aio/content/examples/testing/src/app/demo/demo.spec.ts
index d65b9acfb8..eac2f47e14 100644
--- a/aio/content/examples/testing/src/app/demo/demo.spec.ts
+++ b/aio/content/examples/testing/src/app/demo/demo.spec.ts
@@ -111,8 +111,6 @@ describe('demo (no TestBed):', () => {
     // #enddocregion no-before-each-setup
   });
 
-  // #docregion ReversePipe
-
   describe('ReversePipe', () => {
     let pipe: ReversePipe;
 
@@ -128,7 +126,6 @@ describe('demo (no TestBed):', () => {
     });
 
   });
-  // #enddocregion ReversePipe
 
   // #docregion Lightswitch
   describe('LightswitchComp', () => {
diff --git a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
index 956342ffdb..c1e1145945 100644
--- a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
@@ -37,7 +37,6 @@ describe('demo (with TestBed):', () => {
 
   ////////  Service Tests  /////////////
 
-  // #docregion ValueService
   describe('ValueService', () => {
 
     // #docregion value-service-before-each
@@ -92,7 +91,6 @@ describe('demo (with TestBed):', () => {
       expect(value).toBe('promise value');
     }));
   });
-  // #enddocregion ValueService
 
   describe('MasterService', () => {
     // #docregion master-service-before-each
@@ -232,8 +230,6 @@ describe('demo (with TestBed):', () => {
       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'));
@@ -246,7 +242,6 @@ describe('demo (with TestBed):', () => {
       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)', waitForAsync(() => {
@@ -324,7 +319,6 @@ describe('demo (with TestBed):', () => {
         `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';
@@ -350,7 +344,6 @@ describe('demo (with TestBed):', () => {
       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', () => {
@@ -367,7 +360,6 @@ describe('demo (with TestBed):', () => {
       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();
@@ -388,14 +380,11 @@ describe('demo (with TestBed):', () => {
 
       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
 
 
   });
@@ -628,7 +617,7 @@ describe('demo (with TestBed):', () => {
 
       child.childValue = 'bar';
 
-      return new Promise(resolve => {
+      return new Promise<void>(resolve => {
         // Wait one JS engine turn!
         setTimeout(() => resolve(), 0);
       })
diff --git a/aio/content/examples/testing/src/app/demo/demo.ts b/aio/content/examples/testing/src/app/demo/demo.ts
index 94e936cb87..d1a4ac826c 100644
--- a/aio/content/examples/testing/src/app/demo/demo.ts
+++ b/aio/content/examples/testing/src/app/demo/demo.ts
@@ -16,7 +16,6 @@ export interface Hero {
 }
 
 ////////// Services ///////////////
-// #docregion ValueService
 @Injectable()
 export class ValueService {
   value = 'real value';
@@ -32,7 +31,6 @@ export class ValueService {
     return of('observable delay value').pipe(delay(10));
   }
 }
-// #enddocregion ValueService
 
 // #docregion MasterService
 @Injectable()
@@ -46,7 +44,6 @@ export class MasterService {
 /*
  * Reverse the input string.
 */
-// #docregion ReversePipe
 @Pipe({ name: 'reverse' })
 export class ReversePipe implements PipeTransform {
   transform(s: string) {
@@ -55,7 +52,6 @@ export class ReversePipe implements PipeTransform {
     return r;
   }
 }
-// #enddocregion ReversePipe
 
 //////////// Components /////////////
 @Component({
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.css b/aio/content/examples/testing/src/app/hero/hero-detail.component.css
index 86881c51ac..546e11e392 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.css
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.css
@@ -12,13 +12,12 @@ input {
 }
 button {
   margin-top: 20px;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
 }
 button:hover {
   background-color: #cfd8dc;
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.css b/aio/content/examples/testing/src/app/hero/hero-list.component.css
index 35e45af98d..bb24cf0cd6 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.css
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.css
@@ -46,13 +46,12 @@
   border-radius: 4px 0 0 4px;
 }
 button {
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
 }
 button:hover {
   background-color: #cfd8dc;
diff --git a/aio/content/examples/testing/src/app/in-memory-data.service.ts b/aio/content/examples/testing/src/app/in-memory-data.service.ts
index d3827fcd2b..f97a16368e 100644
--- a/aio/content/examples/testing/src/app/in-memory-data.service.ts
+++ b/aio/content/examples/testing/src/app/in-memory-data.service.ts
@@ -1,4 +1,3 @@
-// #docregion , init
 import { InMemoryDbService } from 'angular-in-memory-web-api';
 import { QUOTES } from './twain/twain.data';
 
diff --git a/aio/content/examples/testing/src/app/model/hero.service.spec.ts b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
index c2e57e6d76..c53ce95668 100644
--- a/aio/content/examples/testing/src/app/model/hero.service.spec.ts
+++ b/aio/content/examples/testing/src/app/model/hero.service.spec.ts
@@ -180,7 +180,6 @@ describe('HeroesService (with mocks)', () => {
       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';
 
@@ -196,19 +195,16 @@ describe('HeroesService (with mocks)', () => {
       // Connection timeout, DNS error, offline, etc
       const errorEvent = new ErrorEvent('so sad', {
         message: emsg,
-        // #enddocregion network-error
         // The rest of this is optional and not used.
         // Just showing that you could provide this too.
         filename: 'HeroService.ts',
         lineno: 42,
         colno: 21
-      // #docregion network-error
       });
 
       // Respond with mock error
       req.error(errorEvent);
     });
-    // #enddocregion network-error
   });
 
   // TODO: test other HeroService methods
diff --git a/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
index cb986f62eb..2827beb5f8 100644
--- a/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
+++ b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
@@ -1,5 +1,3 @@
-// #docplaster
-// #docregion imports
 // Http testing module and mocking controller
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 
@@ -7,7 +5,6 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/
 import { TestBed } from '@angular/core/testing';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 
-// #enddocregion imports
 import { HttpHeaders } from '@angular/common/http';
 
 interface Data {
@@ -16,7 +13,6 @@ interface Data {
 
 const testUrl = '/data';
 
-// #docregion setup
 describe('HttpClient testing', () => {
   let httpClient: HttpClient;
   let httpTestingController: HttpTestingController;
@@ -30,17 +26,13 @@ describe('HttpClient testing', () => {
     httpClient = TestBed.inject(HttpClient);
     httpTestingController = TestBed.inject(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'};
 
@@ -66,7 +58,7 @@ describe('HttpClient testing', () => {
     // 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'};
 
@@ -78,13 +70,11 @@ describe('HttpClient testing', () => {
         expect(data).toEqual(testData)
       );
 
-      // Find request with a predicate function.
-    // #docregion predicate
+    // Find request with a predicate function.
     // Expect one request with an authorization header
     const req = httpTestingController.expectOne(
       request => request.headers.has('Authorization')
     );
-    // #enddocregion predicate
     req.flush(testData);
   });
 
@@ -104,7 +94,6 @@ describe('HttpClient testing', () => {
     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);
@@ -113,10 +102,8 @@ describe('HttpClient testing', () => {
     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';
 
@@ -133,9 +120,7 @@ describe('HttpClient testing', () => {
     // 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';
 
@@ -152,19 +137,16 @@ describe('HttpClient testing', () => {
     // 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
@@ -187,6 +169,4 @@ describe('HttpClient testing', () => {
   //   // Sends request which is never handled by this test
   //   httpClient.get('some/api').subscribe();
   // });
-// #docregion setup
 });
-// #enddocregion setup
diff --git a/aio/content/examples/testing/src/app/shared/canvas.component.ts b/aio/content/examples/testing/src/app/shared/canvas.component.ts
index fdfd9db8b0..c118af2a91 100644
--- a/aio/content/examples/testing/src/app/shared/canvas.component.ts
+++ b/aio/content/examples/testing/src/app/shared/canvas.component.ts
@@ -3,7 +3,7 @@
 // Import patch to make async `HTMLCanvasElement` methods (such as `.toBlob()`) Zone.js-aware.
 // Either import in `polyfills.ts` (if used in more than one places in the app) or in the component
 // file using `HTMLCanvasElement` (if it is only used in a single file).
-import 'zone.js/dist/zone-patch-canvas';
+import 'zone.js/plugins/zone-patch-canvas';
 // #enddocregion import-canvas-patch
 // #docregion main
 import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
diff --git a/aio/content/examples/testing/src/app/shared/title-case.pipe.spec.ts b/aio/content/examples/testing/src/app/shared/title-case.pipe.spec.ts
index 2d32454848..3bc68e59b5 100644
--- a/aio/content/examples/testing/src/app/shared/title-case.pipe.spec.ts
+++ b/aio/content/examples/testing/src/app/shared/title-case.pipe.spec.ts
@@ -2,7 +2,7 @@
 // #docregion
 import { TitleCasePipe } from './title-case.pipe';
 
-// #docregion excerpt, mini-excerpt
+// #docregion excerpt
 describe('TitleCasePipe', () => {
   // This pipe is a pure, stateless function so no need for BeforeEach
   const pipe = new TitleCasePipe();
@@ -10,7 +10,6 @@ describe('TitleCasePipe', () => {
   it('transforms "abc" to "Abc"', () => {
     expect(pipe.transform('abc')).toBe('Abc');
   });
-// #enddocregion mini-excerpt
 
   it('transforms "abc def" to "Abc Def"', () => {
     expect(pipe.transform('abc def')).toBe('Abc Def');
@@ -29,6 +28,6 @@ describe('TitleCasePipe', () => {
   it('transforms "   abc   def" to "   Abc   Def" (preserves spaces) ', () => {
     expect(pipe.transform('   abc   def')).toBe('   Abc   Def');
   });
-// #docregion excerpt, mini-excerpt
+// #docregion excerpt
 });
-// #enddocregion excerpt, mini-excerpt
+// #enddocregion excerpt
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.spec.ts b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
index 629b6a4d5b..d564ea5dfc 100644
--- a/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
+++ b/aio/content/examples/testing/src/app/twain/twain.component.spec.ts
@@ -161,7 +161,6 @@ describe('TwainComponent', () => {
     });
     // #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'));
@@ -173,6 +172,5 @@ describe('TwainComponent', () => {
          expect(errorMessage()).toMatch(/test failure/, 'should display error');
          expect(quoteEl.textContent).toBe('...', 'should show placeholder');
        }));
-    // #enddocregion async-error-test
   });
 });
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.ts b/aio/content/examples/testing/src/app/twain/twain.component.ts
index 152e172911..eca6364f65 100644
--- a/aio/content/examples/testing/src/app/twain/twain.component.ts
+++ b/aio/content/examples/testing/src/app/twain/twain.component.ts
@@ -6,7 +6,6 @@ import { catchError, startWith } from 'rxjs/operators';
 
 import { TwainService } from './twain.service';
 
-// #docregion component
 @Component({
   selector: 'twain-quote',
   // #docregion template
@@ -45,4 +44,3 @@ export class TwainComponent implements OnInit {
   }
 
 }
-// #enddocregion component
diff --git a/aio/content/examples/testing/src/app/welcome/welcome.component.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
index 5eff2cd9fb..3bf225c7fd 100644
--- a/aio/content/examples/testing/src/app/welcome/welcome.component.ts
+++ b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UserService } from '../model/user.service';
 
-// #docregion component
 @Component({
   selector: 'app-welcome',
   template: '<h3 class="welcome"><i>{{welcome}}</i></h3>'
@@ -17,4 +16,4 @@ export class WelcomeComponent implements OnInit {
       'Welcome, ' + this.userService.user.name : 'Please log in.';
   }
 }
-// #enddocregion component, class
+// #enddocregion class
diff --git a/aio/content/examples/testing/src/main-specs.ts b/aio/content/examples/testing/src/main-specs.ts
index b9632512f8..6e7170ca47 100644
--- a/aio/content/examples/testing/src/main-specs.ts
+++ b/aio/content/examples/testing/src/main-specs.ts
@@ -6,7 +6,7 @@ declare var jasmine;
 
 import './polyfills';
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 
 import { getTestBed } from '@angular/core/testing';
 import {
diff --git a/aio/content/examples/toh-pt0/src/styles.1.css b/aio/content/examples/toh-pt0/src/styles.1.css
index 1821a5fc8d..2fb0dfc708 100644
--- a/aio/content/examples/toh-pt0/src/styles.1.css
+++ b/aio/content/examples/toh-pt0/src/styles.1.css
@@ -14,7 +14,7 @@ body {
 }
 body, input[type="text"], button {
   color: #333;
-  font-family: Cambria, Georgia;
+  font-family: Cambria, Georgia, serif;
 }
 /* everywhere else */
 * {
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
index 2879760218..052fbc9091 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
@@ -1,17 +1,16 @@
 <!-- #docregion show-hero-1 -->
-{{hero}}
+<h2>{{hero}}</h2>
 <!-- #enddocregion show-hero-1 -->
 
 <!-- #docregion show-hero-2 -->
-<h2>{{hero.name}} Details</h2>
+<h3>{{hero.name}} Details</h3>
 <div><span>id: </span>{{hero.id}}</div>
 <div><span>name: </span>{{hero.name}}</div>
 <!-- #enddocregion show-hero-2 -->
 
 <!-- #docregion name-input -->
 <div>
-  <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name"/>
-  </label>
+  <label for="name">Hero name: </label>
+  <input id="name" [(ngModel)]="hero.name" placeholder="name">
 </div>
 <!-- #enddocregion name-input -->
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
index e69de29bb2..73592eb3a6 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
@@ -0,0 +1,3 @@
+input {
+  padding: .5rem;
+}
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
index 9a5af7e30c..9779ee4f18 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
@@ -4,7 +4,6 @@
 <!-- #enddocregion pipe -->
 <div><span>id: </span>{{hero.id}}</div>
 <div>
-  <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name"/>
-  </label>
+  <label for="name">Hero name: </label>
+  <input id="name" [(ngModel)]="hero.name" placeholder="name">
 </div>
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts
index 06e5c69f51..152bff0a01 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts
@@ -18,12 +18,10 @@ export class HeroesComponent implements OnInit {
   // #enddocregion add-hero
   */
   // #docregion
-  // #docregion hero-property-1
   hero: Hero = {
     id: 1,
     name: 'Windstorm'
   };
-  // #enddocregion hero-property-1
   // #docregion v1
 
   constructor() { }
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
index 9759a4211b..7a6a8dfd03 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
@@ -16,16 +16,20 @@
   border-radius: 4px;
 }
 .heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
+  color: #2c3a41;
+  background-color: #e6e6e6;
   left: .1em;
 }
 .heroes li.selected {
-  background-color: #CFD8DC;
+  background-color: black;
   color: white;
 }
 .heroes li.selected:hover {
-  background-color: #BBD8DC;
+  background-color: #505050;
+  color: white;
+}
+.heroes li.selected:active {
+  background-color: black;
   color: white;
 }
 .heroes .badge {
@@ -42,3 +46,7 @@
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
+
+input {
+  padding: .5rem;
+}
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
index f8bcb64918..4a00357290 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
@@ -17,9 +17,8 @@
   <h2>{{selectedHero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{selectedHero.id}}</div>
   <div>
-    <label>name:
-      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-    </label>
+    <label for="hero-name">Hero name: </label>
+    <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
   </div>
   <!-- #enddocregion selectedHero-details -->
 
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
index 5beecb0e7d..df0cff66b8 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
@@ -16,12 +16,10 @@ import { HEROES } from '../mock-heroes';
 // #docregion component
 export class HeroesComponent implements OnInit {
 
-  // #docregion heroes
   heroes = HEROES;
-  // #enddocregion heroes
   // #enddocregion component
   // #docregion on-select
-  selectedHero: Hero;
+  selectedHero?: Hero;
  // #enddocregion on-select
 
   constructor() { }
@@ -37,4 +35,3 @@ export class HeroesComponent implements OnInit {
 // #docregion component
 }
 // #enddocregion component
-
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css
index e69de29bb2..73592eb3a6 100644
--- a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css
+++ b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css
@@ -0,0 +1,3 @@
+input {
+  padding: .5rem;
+}
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
index a495e1a84b..86403ce04e 100644
--- a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
+++ b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
@@ -3,9 +3,8 @@
   <h2>{{hero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
-    <label>name:
-      <input [(ngModel)]="hero.name" placeholder="name"/>
-    </label>
+    <label for="hero-name">Hero name: </label>
+    <input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
   </div>
 
 </div>
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts
index 973c5b2b5a..e73308af5b 100644
--- a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts
+++ b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts
@@ -13,7 +13,7 @@ import { Hero } from '../hero';
 })
 export class HeroDetailComponent implements OnInit {
   // #docregion input-hero
-  @Input() hero: Hero;
+  @Input() hero?: Hero;
   // #enddocregion input-hero
 
   constructor() { }
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
index 9759a4211b..9ace14f826 100644
--- a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
@@ -16,16 +16,20 @@
   border-radius: 4px;
 }
 .heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
+  color: #2c3a41;
+  background-color: #e6e6e6;
   left: .1em;
 }
 .heroes li.selected {
-  background-color: #CFD8DC;
+  background-color: black;
   color: white;
 }
 .heroes li.selected:hover {
-  background-color: #BBD8DC;
+  background-color: #505050;
+  color: white;
+}
+.heroes li.selected:active {
+  background-color: black;
   color: white;
 }
 .heroes .badge {
diff --git a/aio/content/examples/toh-pt4/src/app/app.module.ts b/aio/content/examples/toh-pt4/src/app/app.module.ts
index f0265dacba..6b5c794f5b 100644
--- a/aio/content/examples/toh-pt4/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt4/src/app/app.module.ts
@@ -17,11 +17,9 @@ import { MessagesComponent } from './messages/messages.component';
     BrowserModule,
     FormsModule
   ],
-  // #docregion providers
   providers: [
     // no need to place any providers due to the `providedIn` flag...
   ],
-  // #enddocregion providers
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css
index e69de29bb2..73592eb3a6 100644
--- a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css
+++ b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css
@@ -0,0 +1,3 @@
+input {
+  padding: .5rem;
+}
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html
index c6c039a91c..9b7315cae8 100644
--- a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html
+++ b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html
@@ -2,8 +2,7 @@
   <h2>{{hero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
-    <label>name:
-      <input [(ngModel)]="hero.name" placeholder="name"/>
-    </label>
+    <label for="hero-name">Hero name: </label>
+    <input id="hero-name" [(ngModel)]="hero.name" placeholder="name"/>
   </div>
 </div>
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
index 2edf9bba38..383013bf3d 100644
--- a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
+++ b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
@@ -8,9 +8,7 @@ import { Hero } from '../hero';
 })
 export class HeroDetailComponent implements OnInit {
 
-  // #docregion hero
   @Input() hero: Hero;
-  // #enddocregion hero
 
   constructor() { }
 
diff --git a/aio/content/examples/toh-pt4/src/app/hero.service.ts b/aio/content/examples/toh-pt4/src/app/hero.service.ts
index 89a7b5d09c..01b9ba1116 100644
--- a/aio/content/examples/toh-pt4/src/app/hero.service.ts
+++ b/aio/content/examples/toh-pt4/src/app/hero.service.ts
@@ -25,11 +25,11 @@ export class HeroService {
 
   // #docregion getHeroes, getHeroes-1
   getHeroes(): Observable<Hero[]> {
+    const heroes = of(HEROES);
     // #enddocregion getHeroes-1
-    // TODO: send the message _after_ fetching the heroes
     this.messageService.add('HeroService: fetched heroes');
     // #docregion getHeroes-1
-    return of(HEROES);
+    return heroes;
   }
   // #enddocregion getHeroes, getHeroes-1
 }
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
index 9759a4211b..94f075e7ea 100644
--- a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
@@ -16,16 +16,24 @@
   border-radius: 4px;
 }
 .heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
+  color: #2c3a41;
+  background-color: #e6e6e6;
   left: .1em;
 }
+.heroes li:active {
+  background-color: #525252;
+  color: #fafafa;
+}
 .heroes li.selected {
-  background-color: #CFD8DC;
+  background-color: black;
   color: white;
 }
 .heroes li.selected:hover {
-  background-color: #BBD8DC;
+  background-color: #505050;
+  color: white;
+}
+.heroes li.selected:active {
+  background-color: black;
   color: white;
 }
 .heroes .badge {
@@ -42,3 +50,4 @@
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
+
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
index fdddd6823b..a4676a9f2a 100644
--- a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
@@ -9,6 +9,4 @@
 </ul>
 <!-- #enddocregion list -->
 
-<!-- #docregion hero-detail-binding -->
- <app-hero-detail [hero]="selectedHero"></app-hero-detail>
-<!-- #enddocregion hero-detail-binding -->
+<app-hero-detail [hero]="selectedHero"></app-hero-detail>
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts
index 5cfb834e69..bd29c51058 100644
--- a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.ts
@@ -15,15 +15,13 @@ import { MessageService } from '../message.service';
 })
 export class HeroesComponent implements OnInit {
 
-  selectedHero: Hero;
+  selectedHero?: Hero;
 
   // #docregion heroes
-  heroes: Hero[];
+  heroes: Hero[] = [];
   // #enddocregion heroes
 
-  // #docregion ctor
   constructor(private heroService: HeroService, private messageService: MessageService) { }
-  // #enddocregion ctor
 
   // #docregion ng-on-init
   ngOnInit() {
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.css b/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
index de06809856..74a85e82b6 100644
--- a/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.css
@@ -1,35 +1,19 @@
 /* MessagesComponent's private CSS styles */
 h2 {
-  color: red;
+  color: #A80000;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
 }
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: crimson;
-  font-family: Cambria, Georgia;
-}
 
-button.clear {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-button.clear {
+.clear {
   color: #333;
+  background-color: #eee;
   margin-bottom: 12px;
+  padding: 1rem;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+.clear:hover {
+  color: white;
+  background-color: #42545C;
 }
diff --git a/aio/content/examples/toh-pt4/src/app/messages/messages.component.html b/aio/content/examples/toh-pt4/src/app/messages/messages.component.html
index 1df7dfd989..2f0c79464a 100644
--- a/aio/content/examples/toh-pt4/src/app/messages/messages.component.html
+++ b/aio/content/examples/toh-pt4/src/app/messages/messages.component.html
@@ -2,7 +2,7 @@
 
   <h2>Messages</h2>
   <button class="clear"
-          (click)="messageService.clear()">clear</button>
+          (click)="messageService.clear()">Clear messages</button>
   <div *ngFor='let message of messageService.messages'> {{message}} </div>
 
 </div>
diff --git a/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
index 205d500afe..62320d7845 100644
--- a/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
@@ -46,7 +46,7 @@ describe('Tutorial part 5', () => {
 
       appDashboardHref: navElts.get(0),
       appDashboard: element(by.css('app-root app-dashboard')),
-      topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
+      topHeroes: element.all(by.css('app-root app-dashboard > div a')),
 
       appHeroesHref: navElts.get(1),
       appHeroes: element(by.css('app-root app-heroes')),
diff --git a/aio/content/examples/toh-pt5/src/app/app-routing.module.ts b/aio/content/examples/toh-pt5/src/app/app-routing.module.ts
index aad065bd61..f0e3a754ee 100644
--- a/aio/content/examples/toh-pt5/src/app/app-routing.module.ts
+++ b/aio/content/examples/toh-pt5/src/app/app-routing.module.ts
@@ -1,9 +1,8 @@
 // #docplaster
-// #docregion , v1
+// #docregion
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-// #enddocregion v1
 // #docregion import-dashboard
 import { DashboardComponent } from './dashboard/dashboard.component';
 // #enddocregion import-dashboard
@@ -30,16 +29,13 @@ const routes: Routes = [
 ];
 // #enddocregion routes, heroes-route
 
-// #docregion v1
 @NgModule({
-// #enddocregion v1
 // #docregion ngmodule-imports
   imports: [ RouterModule.forRoot(routes) ],
 // #enddocregion ngmodule-imports
-// #docregion v1
 // #docregion export-routermodule
   exports: [ RouterModule ]
 // #enddocregion export-routermodule
 })
 export class AppRoutingModule {}
-// #enddocregion , v1
+// #enddocregion
diff --git a/aio/content/examples/toh-pt5/src/app/app.component.css b/aio/content/examples/toh-pt5/src/app/app.component.css
index c62f266159..cacd591d41 100644
--- a/aio/content/examples/toh-pt5/src/app/app.component.css
+++ b/aio/content/examples/toh-pt5/src/app/app.component.css
@@ -1,28 +1,21 @@
 /* AppComponent's private CSS styles */
 h1 {
-  font-size: 1.2em;
   margin-bottom: 0;
 }
-h2 {
-  font-size: 2em;
-  margin-top: 0;
-  padding-top: 0;
-}
 nav a {
-  padding: 5px 10px;
+  padding: 1rem;
   text-decoration: none;
   margin-top: 10px;
   display: inline-block;
-  background-color: #eee;
+  background-color: #e8e8e8;
+  color: #3d3d3d;
   border-radius: 4px;
 }
-nav a:visited, a:link {
-  color: #334953;
-}
+
 nav a:hover {
-  color: #039be5;
-  background-color: #cfd8dc;
+  color: white;
+  background-color: #42545C;
 }
 nav a.active {
-  color: #039be5;
+  background-color: black;
 }
diff --git a/aio/content/examples/toh-pt5/src/app/app.module.ts b/aio/content/examples/toh-pt5/src/app/app.module.ts
index 2d98512808..7808a72da1 100644
--- a/aio/content/examples/toh-pt5/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt5/src/app/app.module.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
@@ -9,7 +8,6 @@ import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 import { HeroesComponent } from './heroes/heroes.component';
 import { MessagesComponent } from './messages/messages.component';
 
-// #docregion routing-module
 import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
@@ -18,8 +16,6 @@ import { AppRoutingModule } from './app-routing.module';
     FormsModule,
     AppRoutingModule
   ],
-// #enddocregion routing-module
-  // #docregion dashboard
   declarations: [
     AppComponent,
     DashboardComponent,
@@ -27,9 +23,6 @@ import { AppRoutingModule } from './app-routing.module';
     HeroDetailComponent,
     MessagesComponent
   ],
-  // #enddocregion dashboard
   bootstrap: [ AppComponent ]
-// #docregion routing-module
 })
 export class AppModule { }
-// #enddocregion routing-module
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
index ddb4fd29f8..b47dd1654b 100644
--- a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html
@@ -1,8 +1,6 @@
-<h3>Top Heroes</h3>
-<div class="grid grid-pad">
-  <a *ngFor="let hero of heroes" class="col-1-4">
-    <div class="module hero">
-      <h4>{{hero.name}}</h4>
-    </div>
+<h2>Top Heroes</h2>
+<div class="heroes-menu">
+  <a *ngFor="let hero of heroes">
+    {{hero.name}}
   </a>
 </div>
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
index 4b7ec1c3ee..3eec068c24 100644
--- a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css
@@ -1,63 +1,50 @@
 /* DashboardComponent's private CSS styles */
-[class*='col-'] {
-  float: left;
-  padding-right: 20px;
-  padding-bottom: 20px;
+
+h2 {
+  text-align: center;
 }
-[class*='col-']:last-of-type {
-  padding-right: 0;
+
+.heroes-menu {
+  padding: 0;
+  margin: auto;
+  max-width: 1000px;
+
+  /* flexbox */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: flex-start;
+  align-items: flex-start;
 }
+
 a {
-  text-decoration: none;
-}
-*, *:after, *:before {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-h3 {
-  text-align: center;
-  margin-bottom: 0;
-}
-h4 {
-  position: relative;
-}
-.grid {
-  margin: 0;
-}
-.col-1-4 {
-  width: 25%;
-}
-.module {
-  padding: 20px;
-  text-align: center;
-  color: #eee;
-  max-height: 120px;
-  min-width: 120px;
   background-color: #3f525c;
   border-radius: 2px;
+  padding: 1rem;
+  font-size: 1.2rem;
+  text-decoration: none;
+  display: inline-block;
+  color: #fff;
+  text-align: center;
+  width: 100%;
+  min-width: 70px;
+  margin: .5rem auto;
+  box-sizing: border-box;
+
+  /* flexbox */
+  order: 0;
+  flex: 0 1 auto;
+  align-self: auto;
 }
-.module:hover {
-  background-color: #eee;
-  cursor: pointer;
-  color: #607d8b;
-}
-.grid-pad {
-  padding: 10px 0;
-}
-.grid-pad > [class*='col-']:last-of-type {
-  padding-right: 20px;
-}
-@media (max-width: 600px) {
-  .module {
-    font-size: 10px;
-    max-height: 75px; }
-}
-@media (max-width: 1024px) {
-  .grid {
-    margin: 0;
-  }
-  .module {
-    min-width: 60px;
+
+@media (min-width: 600px) {
+  a {
+    width: 18%;
+    box-sizing: content-box;
   }
 }
+
+a:hover {
+  background-color: #000;
+}
diff --git a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
index ea2387fdc1..aa0505dcf5 100644
--- a/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
+++ b/aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html
@@ -1,11 +1,9 @@
-<h3>Top Heroes</h3>
-<div class="grid grid-pad">
+<h2>Top Heroes</h2>
+<div class="heroes-menu">
   <!-- #docregion click -->
-  <a *ngFor="let hero of heroes" class="col-1-4"
-      routerLink="/detail/{{hero.id}}">
-    <div class="module hero">
-      <h4>{{hero.name}}</h4>
-    </div>
+  <a *ngFor="let hero of heroes"
+    routerLink="/detail/{{hero.id}}">
+    {{hero.name}}
   </a>
-   <!-- #enddocregion click -->
+  <!-- #enddocregion click -->
 </div>
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
index 835a13de5b..a9f3910419 100644
--- a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
@@ -1,24 +1,18 @@
 /* HeroDetailComponent's private CSS styles */
 label {
-  display: inline-block;
-  width: 3em;
-  margin: .5em 0;
-  color: #607D8B;
+  color: #435960;
   font-weight: bold;
 }
 input {
-  height: 2em;
   font-size: 1em;
-  padding-left: .4em;
+  padding: .5rem;
 }
 button {
   margin-top: 20px;
-  font-family: Arial;
   background-color: #eee;
-  border: none;
-  padding: 5px 10px;
+  padding: 1rem;
   border-radius: 4px;
-  cursor: pointer;
+  font-size: 1rem;
 }
 button:hover {
   background-color: #cfd8dc;
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html
index 5f7b1d46a3..2e1c4613b2 100644
--- a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html
@@ -2,9 +2,8 @@
   <h2>{{hero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
-    <label>name:
-      <input [(ngModel)]="hero.name" placeholder="name"/>
-    </label>
+    <label for="hero-name">Hero name: </label>
+    <input id="hero-name" [(ngModel)]="hero.name" placeholder="Hero name"/>
   </div>
   <!-- #docregion back-button -->
   <button (click)="goBack()">go back</button>
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
index b00784c1d0..362230dca7 100644
--- a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
@@ -32,13 +32,11 @@ export class HeroDetailComponent implements OnInit {
     this.getHero();
   }
 
-  // #docregion getHero
   getHero(): void {
     const id = +this.route.snapshot.paramMap.get('id');
     this.heroService.getHero(id)
       .subscribe(hero => this.hero = hero);
   }
-  // #enddocregion getHero
   // #enddocregion ngOnInit
 
   // #docregion goBack
diff --git a/aio/content/examples/toh-pt5/src/app/hero.service.ts b/aio/content/examples/toh-pt5/src/app/hero.service.ts
index c0dc5e85f7..4cdf959945 100644
--- a/aio/content/examples/toh-pt5/src/app/hero.service.ts
+++ b/aio/content/examples/toh-pt5/src/app/hero.service.ts
@@ -12,16 +12,18 @@ export class HeroService {
   constructor(private messageService: MessageService) { }
 
   getHeroes(): Observable<Hero[]> {
-    // TODO: send the message _after_ fetching the heroes
+    const heroes = of(HEROES);
     this.messageService.add('HeroService: fetched heroes');
-    return of(HEROES);
+    return heroes;
   }
 
   // #docregion getHero
   getHero(id: number): Observable<Hero> {
-    // TODO: send the message _after_ fetching the hero
+    // For now, assume that a hero with the specified `id` always exists.
+    // Error handling will be added in the next step of the tutorial.
+    const hero = HEROES.find(h => h.id === id) as Hero;
     this.messageService.add(`HeroService: fetched hero id=${id}`);
-    return of(HEROES.find(hero => hero.id === id));
+    return of(hero);
   }
   // #enddocregion getHero
 }
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
index 2ad3fefb31..d54f7a290c 100644
--- a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
@@ -8,29 +8,32 @@
 .heroes li {
   position: relative;
   cursor: pointer;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
 }
 
 .heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
   left: .1em;
 }
 
 .heroes a {
   color: #333;
   text-decoration: none;
-  position: relative;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
   display: block;
-  width: 250px;
+  width: 100%;
 }
 
 .heroes a:hover {
-  color:#607D8B;
+  color: #2c3a41;
+  background-color: #e6e6e6;
+}
+
+.heroes a:active {
+  background-color: #525252;
+  color: #fafafa;
 }
 
 .heroes .badge {
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.css b/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
index de06809856..9a914ecbc2 100644
--- a/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.css
@@ -1,35 +1,19 @@
 /* MessagesComponent's private CSS styles */
 h2 {
-  color: red;
+  color: #A80000;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
 }
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: crimson;
-  font-family: Cambria, Georgia;
-}
 
-button.clear {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-button.clear {
+.clear {
   color: #333;
+  background-color: #eee;
   margin-bottom: 12px;
+  padding: 1rem;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+.clear:hover {
+  color: #fff;
+  background-color: #42545C;
 }
diff --git a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
index 8e86f5247d..75259e307e 100644
--- a/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
+++ b/aio/content/examples/toh-pt5/src/app/messages/messages.component.html
@@ -2,7 +2,7 @@
 
   <h2>Messages</h2>
   <button class="clear"
-          (click)="messageService.clear()">clear</button>
+          (click)="messageService.clear()">Clear messages</button>
   <div *ngFor="let message of messageService.messages"> {{message}} </div>
 
 </div>
diff --git a/aio/content/examples/toh-pt5/src/index.html b/aio/content/examples/toh-pt5/src/index.html
index 41147fe767..0e589b1238 100644
--- a/aio/content/examples/toh-pt5/src/index.html
+++ b/aio/content/examples/toh-pt5/src/index.html
@@ -3,9 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>Tour of Heroes</title>
-  <!-- #docregion base-href -->
   <base href="/">
-  <!-- #enddocregion base-href -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
diff --git a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
index c92e101fb0..0f579dda7d 100644
--- a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
@@ -53,7 +53,7 @@ describe('Tutorial part 6', () => {
 
       appDashboardHref: navElts.get(0),
       appDashboard: element(by.css('app-root app-dashboard')),
-      topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
+      topHeroes: element.all(by.css('app-root app-dashboard > div a')),
 
       appHeroesHref: navElts.get(1),
       appHeroes: element(by.css('app-root app-heroes')),
@@ -176,7 +176,7 @@ describe('Tutorial part 6', () => {
       const numHeroes = heroesBefore.length;
 
       await element(by.css('input')).sendKeys(addedHeroName);
-      await element(by.buttonText('add')).click();
+      await element(by.buttonText('Add hero')).click();
 
       const page = getPageElts();
       const heroesAfter = await toHeroArray(page.allHeroes);
@@ -193,20 +193,20 @@ describe('Tutorial part 6', () => {
 
       for (const button of buttons) {
         // Inherited styles from styles.css
-        expect(await button.getCssValue('font-family')).toBe('Arial');
+        expect(await button.getCssValue('font-family')).toBe('Arial, Helvetica, sans-serif');
         expect(await button.getCssValue('border')).toContain('none');
-        expect(await button.getCssValue('padding')).toBe('5px 10px');
+        expect(await button.getCssValue('padding')).toBe('1px 10px 3px');
         expect(await button.getCssValue('border-radius')).toBe('4px');
         // Styles defined in heroes.component.css
-        expect(await button.getCssValue('left')).toBe('194px');
-        expect(await button.getCssValue('top')).toBe('-32px');
+        expect(await button.getCssValue('left')).toBe('210px');
+        expect(await button.getCssValue('top')).toBe('5px');
       }
 
-      const addButton = element(by.buttonText('add'));
+      const addButton = element(by.buttonText('Add hero'));
       // Inherited styles from styles.css
-      expect(await addButton.getCssValue('font-family')).toBe('Arial');
+      expect(await addButton.getCssValue('font-family')).toBe('Arial, Helvetica, sans-serif');
       expect(await addButton.getCssValue('border')).toContain('none');
-      expect(await addButton.getCssValue('padding')).toBe('5px 10px');
+      expect(await addButton.getCssValue('padding')).toBe('8px 24px');
       expect(await addButton.getCssValue('border-radius')).toBe('4px');
     });
 
diff --git a/aio/content/examples/toh-pt6/src/app/app.component.css b/aio/content/examples/toh-pt6/src/app/app.component.css
index c1d8721226..114a0b70dd 100644
--- a/aio/content/examples/toh-pt6/src/app/app.component.css
+++ b/aio/content/examples/toh-pt6/src/app/app.component.css
@@ -1,28 +1,20 @@
 /* AppComponent's private CSS styles */
 h1 {
-  font-size: 1.2em;
   margin-bottom: 0;
 }
-h2 {
-  font-size: 2em;
-  margin-top: 0;
-  padding-top: 0;
-}
 nav a {
-  padding: 5px 10px;
+  padding: 1rem;
   text-decoration: none;
   margin-top: 10px;
   display: inline-block;
-  background-color: #eee;
+  background-color: #e8e8e8;
+  color: #3d3d3d;
   border-radius: 4px;
 }
-nav a:visited, a:link {
-  color: #334953;
-}
 nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
+  color: white;
+  background-color: #42545C;
 }
 nav a.active {
-  color: #039be5;
+  background-color: black;
 }
diff --git a/aio/content/examples/toh-pt6/src/app/app.module.ts b/aio/content/examples/toh-pt6/src/app/app.module.ts
index feef63fba2..aa0f35a0d3 100644
--- a/aio/content/examples/toh-pt6/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt6/src/app/app.module.ts
@@ -1,5 +1,4 @@
 // #docplaster
-// #docregion , v1
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
@@ -18,9 +17,7 @@ import { AppComponent } from './app.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 import { HeroesComponent } from './heroes/heroes.component';
-// #enddocregion v1
 import { HeroSearchComponent } from './hero-search/hero-search.component';
-// #docregion v1
 import { MessagesComponent } from './messages/messages.component';
 
     // #docregion import-httpclientmodule
@@ -51,13 +48,10 @@ import { MessagesComponent } from './messages/messages.component';
     HeroesComponent,
     HeroDetailComponent,
     MessagesComponent,
-    // #enddocregion v1
     HeroSearchComponent
-    // #docregion v1
   ],
   bootstrap: [ AppComponent ]
 // #docregion import-httpclientmodule
 })
 // #enddocregion import-httpclientmodule
 export class AppModule { }
-// #enddocregion , v1
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
index 938b84b2b0..b1e6e6785e 100644
--- a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css
@@ -1,63 +1,54 @@
 /* DashboardComponent's private CSS styles */
-[class*='col-'] {
-  float: left;
-  padding-right: 20px;
-  padding-bottom: 20px;
+
+h2 {
+  text-align: center;
 }
-[class*='col-']:last-of-type {
-  padding-right: 0;
+
+.heroes-menu {
+  padding: 0;
+  margin: auto;
+  max-width: 1000px;
+
+  /* flexbox */
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: flex-start;
+  align-items: flex-start;
 }
+
 a {
-  text-decoration: none;
-}
-*, *:after, *:before {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-h3 {
-  text-align: center;
-  margin-bottom: 0;
-}
-h4 {
-  position: relative;
-}
-.grid {
-  margin: 0;
-}
-.col-1-4 {
-  width: 25%;
-}
-.module {
-  padding: 20px;
-  text-align: center;
-  color: #eee;
-  max-height: 120px;
-  min-width: 120px;
   background-color: #3f525c;
   border-radius: 2px;
+  padding: 1rem;
+  font-size: 1.2rem;
+  text-decoration: none;
+  display: inline-block;
+  color: #fff;
+  text-align: center;
+  width: 100%;
+  min-width: 70px;
+  margin: .5rem auto;
+  box-sizing: border-box;
+
+  /* flexbox */
+  order: 0;
+  flex: 0 1 auto;
+  align-self: auto;
 }
-.module:hover {
-  background-color: #EEE;
-  cursor: pointer;
-  color: #607d8b;
-}
-.grid-pad {
-  padding: 10px 0;
-}
-.grid-pad > [class*='col-']:last-of-type {
-  padding-right: 20px;
-}
-@media (max-width: 600px) {
-  .module {
-    font-size: 10px;
-    max-height: 75px; }
-}
-@media (max-width: 1024px) {
-  .grid {
-    margin: 0;
-  }
-  .module {
-    min-width: 60px;
+
+@media (min-width: 600px) {
+  a {
+    width: 18%;
+    box-sizing: content-box;
   }
 }
+
+a:hover {
+  background-color: black;
+}
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html
index b70c0c7d6e..9a20700f46 100644
--- a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html
@@ -1,10 +1,8 @@
-<h3>Top Heroes</h3>
-<div class="grid grid-pad">
-  <a *ngFor="let hero of heroes" class="col-1-4"
+<h2>Top Heroes</h2>
+<div class="heroes-menu">
+  <a *ngFor="let hero of heroes"
       routerLink="/detail/{{hero.id}}">
-    <div class="module hero">
-      <h4>{{hero.name}}</h4>
-    </div>
+      {{hero.name}}
   </a>
 </div>
 
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
index 224f5db3ce..7fb248d94b 100644
--- a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
@@ -37,7 +37,7 @@ describe('DashboardComponent', () => {
   });
 
   it('should display "Top Heroes" as headline', () => {
-    expect(fixture.nativeElement.querySelector('h3').textContent).toEqual('Top Heroes');
+    expect(fixture.nativeElement.querySelector('h2').textContent).toEqual('Top Heroes');
   });
 
   it('should call heroService', waitForAsync(() => {
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
index 835a13de5b..f15f55a449 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
@@ -1,24 +1,19 @@
 /* HeroDetailComponent's private CSS styles */
 label {
-  display: inline-block;
-  width: 3em;
-  margin: .5em 0;
-  color: #607D8B;
+  color: #435960;
   font-weight: bold;
 }
 input {
-  height: 2em;
   font-size: 1em;
-  padding-left: .4em;
+  padding: .5rem;
 }
 button {
   margin-top: 20px;
-  font-family: Arial;
+  margin-right: .5rem;
   background-color: #eee;
-  border: none;
-  padding: 5px 10px;
+  padding: 1rem;
   border-radius: 4px;
-  cursor: pointer;
+  font-size: 1rem;
 }
 button:hover {
   background-color: #cfd8dc;
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html
index 860378b3b4..dbef138c6d 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html
@@ -2,9 +2,8 @@
   <h2>{{hero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
-    <label>name:
-      <input [(ngModel)]="hero.name" placeholder="name"/>
-    </label>
+    <label for="hero-name">Hero name: </label>
+    <input id="hero-name" [(ngModel)]="hero.name" placeholder="Hero name"/>
   </div>
   <button (click)="goBack()">go back</button>
   <!-- #docregion save -->
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css
index 190d9bbc10..ce919d87f4 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css
@@ -1,37 +1,45 @@
 /* HeroSearch private styles */
-.search-result li {
+
+label {
+  display: block;
+  font-weight: bold;
+  font-size: 1.2rem;
+  margin-top: 1rem;
+  margin-bottom: .5rem;
+
+}
+input {
+  padding: .5rem;
+  width: 100%;
+  max-width: 600px;
+  box-sizing: border-box;
+  display: block;
+}
+
+input:focus {
+  outline: #336699 auto 1px;
+}
+
+li {
+  list-style-type: none;
+}
+.search-result li a {
   border-bottom: 1px solid gray;
   border-left: 1px solid gray;
   border-right: 1px solid gray;
-  width: 195px;
-  height: 16px;
-  padding: 5px;
-  background-color: white;
-  cursor: pointer;
-  list-style-type: none;
-}
-
-.search-result li:hover {
-  background-color: #607D8B;
-}
-
-.search-result li a {
-  color: #888;
-  display: block;
+  display: inline-block;
+  width: 100%;
+  max-width: 600px;
+  padding: .5rem;
+  box-sizing: border-box;
   text-decoration: none;
+  color: black;
 }
 
 .search-result li a:hover {
+  background-color: #435A60;
   color: white;
 }
-.search-result li a:active {
-  color: white;
-}
-#search-box {
-  width: 200px;
-  height: 20px;
-}
-
 
 ul.search-result {
   margin-top: 0;
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
index de72fd791f..30f649d251 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html
@@ -1,6 +1,5 @@
 <div id="search-component">
-  <h4><label for="search-box">Hero Search</label></h4>
-
+  <label for="search-box">Hero Search</label>
   <!-- #docregion input -->
   <input #searchBox id="search-box" (input)="search(searchBox.value)" />
   <!-- #enddocregion input -->
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
index 5819e824ec..0214d99377 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
@@ -2,13 +2,11 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
 
-// #docregion rxjs-imports
 import { Observable, Subject } from 'rxjs';
 
 import {
    debounceTime, distinctUntilChanged, switchMap
  } from 'rxjs/operators';
-// #enddocregion rxjs-imports
 
 import { Hero } from '../hero';
 import { HeroService } from '../hero.service';
diff --git a/aio/content/examples/toh-pt6/src/app/hero.service.ts b/aio/content/examples/toh-pt6/src/app/hero.service.ts
index 5bc7168441..82f233f04c 100644
--- a/aio/content/examples/toh-pt6/src/app/hero.service.ts
+++ b/aio/content/examples/toh-pt6/src/app/hero.service.ts
@@ -49,23 +49,19 @@ export class HeroService {
   }
   // #enddocregion getHeroes, getHeroes-1, getHeroes-2
 
-  // #docregion getHeroNo404
   /** GET hero by id. Return `undefined` when id not found */
   getHeroNo404<Data>(id: number): Observable<Hero> {
     const url = `${this.heroesUrl}/?id=${id}`;
     return this.http.get<Hero[]>(url)
       .pipe(
         map(heroes => heroes[0]), // returns a {0|1} element array
-        // #enddocregion getHeroNo404
         tap(h => {
           const outcome = h ? `fetched` : `did not find`;
           this.log(`${outcome} hero id=${id}`);
         }),
         catchError(this.handleError<Hero>(`getHero id=${id}`))
-        // #docregion getHeroNo404
       );
   }
-  // #enddocregion getHeroNo404
 
   // #docregion getHero
   /** GET hero by id. Will 404 if id not found */
@@ -108,8 +104,7 @@ export class HeroService {
 
   // #docregion deleteHero
   /** DELETE: delete the hero from the server */
-  deleteHero(hero: Hero | number): Observable<Hero> {
-    const id = typeof hero === 'number' ? hero : hero.id;
+  deleteHero(id: number): Observable<Hero> {
     const url = `${this.heroesUrl}/${id}`;
 
     return this.http.delete<Hero>(url, this.httpOptions).pipe(
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index 9046623926..62760d9fd1 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -5,32 +5,44 @@
   padding: 0;
   width: 15em;
 }
+
+input {
+  display: block;
+  width: 100%;
+  padding: .5rem;
+  margin: 1rem 0;
+  box-sizing: border-box;
+}
+
 .heroes li {
   position: relative;
   cursor: pointer;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
 }
 
 .heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
   left: .1em;
 }
 
 .heroes a {
   color: #333;
   text-decoration: none;
-  position: relative;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
   display: block;
-  width: 250px;
+  width: 100%;
 }
 
 .heroes a:hover {
-  color: #607D8B;
+  color: #2c3a41;
+  background-color: #e6e6e6;
+}
+
+.heroes a:active {
+  background-color: #525252;
+  color: #fafafa;
 }
 
 .heroes .badge {
@@ -38,7 +50,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #405061;
+  background-color:#405061;
   line-height: 1em;
   position: relative;
   left: -1px;
@@ -50,27 +62,28 @@
   border-radius: 4px 0 0 4px;
 }
 
-/* #docregion additions */
-button {
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-  font-family: Arial;
+.add-button {
+ padding: .5rem 1.5rem;
+ font-size: 1rem;
+ margin-bottom: 2rem;
 }
 
-button:hover {
-  background-color: #cfd8dc;
+.add-button:hover {
+  color: white;
+  background-color: #42545C;
 }
 
 button.delete {
-  position: relative;
-  left: 194px;
-  top: -32px;
-  background-color: gray !important;
+  position: absolute;
+  left: 210px;
+  top: 5px;
+  background-color: white;
+  color:  #525252;
+  font-size: 1.1rem;
+  padding: 1px 10px 3px 10px;
+}
+
+button.delete:hover {
+  background-color: #525252;
   color: white;
 }
-/* #enddocregion additions */
-
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html
index 5daa83bd64..0959a24256 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.html
@@ -2,12 +2,12 @@
 
 <!-- #docregion add -->
 <div>
-  <label>Hero name:
-    <input #heroName />
-  </label>
+  <label id="new-hero">Hero name: </label>
+  <input for="new-hero" #heroName />
+
   <!-- (click) passes input value to add() and then clears the input -->
-  <button (click)="add(heroName.value); heroName.value=''">
-    add
+  <button class="add-button" (click)="add(heroName.value); heroName.value=''">
+    Add hero
   </button>
 </div>
 <!-- #enddocregion add -->
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
index 7cdeca088a..5826d8ace8 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
@@ -36,7 +36,7 @@ export class HeroesComponent implements OnInit {
   // #docregion delete
   delete(hero: Hero): void {
     this.heroes = this.heroes.filter(h => h !== hero);
-    this.heroService.deleteHero(hero).subscribe();
+    this.heroService.deleteHero(hero.id).subscribe();
   }
   // #enddocregion delete
 
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.css b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
index de06809856..9a914ecbc2 100644
--- a/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.css
@@ -1,35 +1,19 @@
 /* MessagesComponent's private CSS styles */
 h2 {
-  color: red;
+  color: #A80000;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
 }
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: crimson;
-  font-family: Cambria, Georgia;
-}
 
-button.clear {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-button.clear {
+.clear {
   color: #333;
+  background-color: #eee;
   margin-bottom: 12px;
+  padding: 1rem;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+.clear:hover {
+  color: #fff;
+  background-color: #42545C;
 }
diff --git a/aio/content/examples/toh-pt6/src/app/messages/messages.component.html b/aio/content/examples/toh-pt6/src/app/messages/messages.component.html
index 1df7dfd989..2f0c79464a 100644
--- a/aio/content/examples/toh-pt6/src/app/messages/messages.component.html
+++ b/aio/content/examples/toh-pt6/src/app/messages/messages.component.html
@@ -2,7 +2,7 @@
 
   <h2>Messages</h2>
   <button class="clear"
-          (click)="messageService.clear()">clear</button>
+          (click)="messageService.clear()">Clear messages</button>
   <div *ngFor='let message of messageService.messages'> {{message}} </div>
 
 </div>
diff --git a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
index ffebea3ff1..7992cb36ba 100644
--- a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
@@ -172,7 +172,7 @@ describe('Universal', () => {
 
       for (const button of buttons) {
         // Inherited styles from styles.css
-        expect(await button.getCssValue('font-family')).toBe('Arial');
+        expect(await button.getCssValue('font-family')).toBe('Arial, sans-serif');
         expect(await button.getCssValue('border')).toContain('none');
         expect(await button.getCssValue('padding')).toBe('5px 10px');
         expect(await button.getCssValue('border-radius')).toBe('4px');
@@ -183,7 +183,7 @@ describe('Universal', () => {
 
       const addButton = element(by.buttonText('add'));
       // Inherited styles from styles.css
-      expect(await addButton.getCssValue('font-family')).toBe('Arial');
+      expect(await addButton.getCssValue('font-family')).toBe('Arial, sans-serif');
       expect(await addButton.getCssValue('border')).toContain('none');
       expect(await addButton.getCssValue('padding')).toBe('5px 10px');
       expect(await addButton.getCssValue('border-radius')).toBe('4px');
diff --git a/aio/content/examples/universal/server.ts b/aio/content/examples/universal/server.ts
index 7f4aace2fa..8b9339e753 100644
--- a/aio/content/examples/universal/server.ts
+++ b/aio/content/examples/universal/server.ts
@@ -1,4 +1,4 @@
-import 'zone.js/dist/zone-node';
+import 'zone.js/node';
 
 import { ngExpressEngine } from '@nguniversal/express-engine';
 import * as express from 'express';
diff --git a/aio/content/examples/universal/src/app/app.component.css b/aio/content/examples/universal/src/app/app.component.css
index c1d8721226..1bdf7bdd58 100644
--- a/aio/content/examples/universal/src/app/app.component.css
+++ b/aio/content/examples/universal/src/app/app.component.css
@@ -3,11 +3,6 @@ h1 {
   font-size: 1.2em;
   margin-bottom: 0;
 }
-h2 {
-  font-size: 2em;
-  margin-top: 0;
-  padding-top: 0;
-}
 nav a {
   padding: 5px 10px;
   text-decoration: none;
diff --git a/aio/content/examples/universal/src/app/app.module.ts b/aio/content/examples/universal/src/app/app.module.ts
index b27d822356..6e0dc96281 100644
--- a/aio/content/examples/universal/src/app/app.module.ts
+++ b/aio/content/examples/universal/src/app/app.module.ts
@@ -1,4 +1,3 @@
-// #docplaster
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
@@ -16,17 +15,13 @@ import { HeroesComponent } from './heroes/heroes.component';
 import { HeroSearchComponent } from './hero-search/hero-search.component';
 import { MessagesComponent } from './messages/messages.component';
 
-// #docregion platform-detection
 import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 
-// #enddocregion platform-detection
 
 @NgModule({
   imports: [
-    // #docregion browsermodule
     BrowserModule.withServerTransition({ appId: 'tour-of-heroes' }),
-    // #enddocregion browsermodule
     FormsModule,
     AppRoutingModule,
     HttpClientModule,
@@ -49,7 +44,6 @@ import { isPlatformBrowser } from '@angular/common';
   bootstrap: [ AppComponent ]
 })
 export class AppModule {
-  // #docregion platform-detection
   constructor(
     @Inject(PLATFORM_ID) private platformId: object,
     @Inject(APP_ID) private appId: string) {
@@ -57,5 +51,4 @@ export class AppModule {
       'in the browser' : 'on the server';
     console.log(`Running ${platform} with appId=${appId}`);
   }
-  // #enddocregion platform-detection
 }
diff --git a/aio/content/examples/universal/src/app/dashboard/dashboard.component.css b/aio/content/examples/universal/src/app/dashboard/dashboard.component.css
index 938b84b2b0..031b2e382f 100644
--- a/aio/content/examples/universal/src/app/dashboard/dashboard.component.css
+++ b/aio/content/examples/universal/src/app/dashboard/dashboard.component.css
@@ -10,9 +10,7 @@
 a {
   text-decoration: none;
 }
-*, *:after, *:before {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
+*, *::after, *::before {
   box-sizing: border-box;
 }
 h3 {
diff --git a/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css
index 835a13de5b..6a860b871d 100644
--- a/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css
+++ b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css
@@ -13,7 +13,7 @@ input {
 }
 button {
   margin-top: 20px;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
diff --git a/aio/content/examples/universal/src/app/heroes/heroes.component.css b/aio/content/examples/universal/src/app/heroes/heroes.component.css
index 915c246fc4..a081f6ce78 100644
--- a/aio/content/examples/universal/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/universal/src/app/heroes/heroes.component.css
@@ -56,8 +56,7 @@ button {
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
diff --git a/aio/content/examples/universal/src/app/messages/messages.component.css b/aio/content/examples/universal/src/app/messages/messages.component.css
index de06809856..08585dcbaf 100644
--- a/aio/content/examples/universal/src/app/messages/messages.component.css
+++ b/aio/content/examples/universal/src/app/messages/messages.component.css
@@ -4,32 +4,17 @@ h2 {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
 }
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: crimson;
-  font-family: Cambria, Georgia;
-}
 
 button.clear {
-  font-family: Arial;
+  font-family: Arial, sans-serif;
+  color: #333;
   background-color: #eee;
+  margin-bottom: 12px;
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
 }
 button:hover {
   background-color: #cfd8dc;
 }
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-button.clear {
-  color: #333;
-  margin-bottom: 12px;
-}
diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts
index e95104cbcc..8cd5f0a67d 100644
--- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts
@@ -7,7 +7,6 @@ import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
 import { heroDetail, HeroDetailDirective } from './hero-detail.component';
 import { ContainerComponent } from './container.component';
 
-// #docregion heroupgrade
 @NgModule({
   imports: [
     BrowserModule,
@@ -27,7 +26,6 @@ export class AppModule {
     this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
   }
 }
-// #enddocregion heroupgrade
 
 angular.module('heroApp', [])
   .component('heroDetail', heroDetail)
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts
index 22dd29ae6d..55040db949 100644
--- a/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts
@@ -6,10 +6,8 @@ import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
 
 import { MainController } from './main.controller';
 
-// #docregion downgradecomponent
 import { HeroDetailComponent } from './hero-detail.component';
 
-// #enddocregion downgradecomponent
 @NgModule({
   imports: [
     BrowserModule,
@@ -28,12 +26,10 @@ export class AppModule {
     this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
   }
 }
-// #docregion downgradecomponent
 
 angular.module('heroApp', [])
   .controller('MainController', MainController)
   .directive('heroDetail', downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory);
 
-// #enddocregion downgradecomponent
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts
index e95104cbcc..8cd5f0a67d 100644
--- a/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts
+++ b/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts
@@ -7,7 +7,6 @@ import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
 import { heroDetail, HeroDetailDirective } from './hero-detail.component';
 import { ContainerComponent } from './container.component';
 
-// #docregion heroupgrade
 @NgModule({
   imports: [
     BrowserModule,
@@ -27,7 +26,6 @@ export class AppModule {
     this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });
   }
 }
-// #enddocregion heroupgrade
 
 angular.module('heroApp', [])
   .component('heroDetail', heroDetail)
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts
index 4ebfdd344e..976d1ecd30 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts
@@ -1,8 +1,5 @@
-// #docregion
-// #docregion activatedroute
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
-// #enddocregion activatedroute
 import { Observable, of } from 'rxjs';
 
 import { PhoneDetailComponent } from './phone-detail.component';
@@ -19,16 +16,13 @@ class MockPhone {
   }
 }
 
-// #docregion activatedroute
 
 class ActivatedRouteMock {
   constructor(public snapshot: any) {}
 }
 
-// #enddocregion activatedroute
 
 describe('PhoneDetailComponent', () => {
-  // #docregion activatedroute
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -40,7 +34,6 @@ describe('PhoneDetailComponent', () => {
     })
     .compileComponents();
   }));
-  // #enddocregion activatedroute
 
   it('should fetch phone detail', () => {
     const fixture = TestBed.createComponent(PhoneDetailComponent);
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts
index 4483f682d2..f0216b9bc2 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts
@@ -1,21 +1,14 @@
-// #docplaster
-// #docregion
 declare var angular: angular.IAngularStatic;
 import { downgradeComponent } from '@angular/upgrade/static';
 
-// #docregion initialclass
 import { Component } from '@angular/core';
 
 import { Phone, PhoneData } from '../core/phone/phone.service';
-// #enddocregion initialclass
 import { RouteParams } from '../ajs-upgraded-providers';
 
-// #docregion initialclass
 @Component({
   selector: 'phone-detail',
   templateUrl: './phone-detail.template.html',
-  // #enddocregion initialclass
-  // #docregion initialclass
 })
 export class PhoneDetailComponent {
   phone: PhoneData;
@@ -32,7 +25,6 @@ export class PhoneDetailComponent {
     this.mainImageUrl = imageUrl;
   }
 }
-// #enddocregion initialclass
 
 angular.module('phoneDetail')
   .directive(
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
index 433870151d..04a2dd1467 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js
@@ -62,7 +62,7 @@ function importSystemJsExtras(){
   });
 }
 
-function initTestBed(){
+function initTestBed() {
   return Promise.all([
     System.import('@angular/core/testing'),
     System.import('@angular/platform-browser-dynamic/testing')
@@ -79,7 +79,7 @@ function initTestBed(){
 }
 
 // Import all spec files and start karma
-function initTesting () {
+function initTesting() {
   return Promise.all(
     allSpecFiles.map(function (moduleName) {
       return System.import(moduleName);
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts b/aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts
index c8755386e7..b8961beaa6 100644
--- a/aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/app.module.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
@@ -27,8 +26,6 @@ import { PhoneListComponent } from './phone-list/phone-list.component';
   providers: [
     Phone
   ],
-  // #docregion bootstrap
   bootstrap: [ AppComponent ]
-  // #enddocregion bootstrap
 })
 export class AppModule {}
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/main.ts b/aio/content/examples/upgrade-phonecat-3-final/app/main.ts
index 08be7a99ba..6af7a5b2ae 100644
--- a/aio/content/examples/upgrade-phonecat-3-final/app/main.ts
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/main.ts
@@ -1,10 +1,5 @@
-// #docregion
-// #docregion imports
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app.module';
-// #enddocregion imports
 
-// #docregion bootstrap
 platformBrowserDynamic().bootstrapModule(AppModule);
-// #enddocregion bootstrap
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html
index b4a994b297..2678d384c2 100644
--- a/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html
@@ -3,7 +3,6 @@
     <div class="col-md-2">
       <!--Sidebar content-->
 
-      <!-- #docregion controls -->
       <p>
         Search:
         <input [(ngModel)]="query" />
@@ -16,7 +15,6 @@
           <option value="age">Newest</option>
         </select>
       </p>
-      <!-- #enddocregion controls -->
 
     </div>
     <div class="col-md-10">
diff --git a/aio/content/examples/upgrade-phonecat-3-final/index.html b/aio/content/examples/upgrade-phonecat-3-final/index.html
index 5a74aba36d..012b5a1ebe 100644
--- a/aio/content/examples/upgrade-phonecat-3-final/index.html
+++ b/aio/content/examples/upgrade-phonecat-3-final/index.html
@@ -4,9 +4,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <!-- #docregion base -->
     <base href="/app/">
-    <!-- #enddocregion base -->
     <title>Google Phone Gallery</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
     <link rel="stylesheet" href="app.css" />
diff --git a/aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js
index abdcdfc6d9..0b42e02dd6 100644
--- a/aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js
+++ b/aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js
@@ -3,7 +3,6 @@
  * Adjust as necessary for your application needs.
  */
 (function (global) {
-  // #docregion paths
   System.config({
     paths: {
       // paths serve as alias
@@ -12,7 +11,6 @@
     map: {
       'ng-loader': '../src/systemjs-angular-loader.js',
       app: '/app',
-      // #enddocregion paths
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
@@ -29,9 +27,7 @@
       // other libraries
       'rxjs': 'npm:rxjs',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
-      // #docregion paths
     },
-    // #enddocregion paths
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {
       'app': {
diff --git a/aio/content/examples/user-input/src/app/keyup.components.ts b/aio/content/examples/user-input/src/app/keyup.components.ts
index 6274b0569b..cd5e1072ef 100644
--- a/aio/content/examples/user-input/src/app/keyup.components.ts
+++ b/aio/content/examples/user-input/src/app/keyup.components.ts
@@ -3,7 +3,6 @@
 // #docregion
 import { Component } from '@angular/core';
 
-// #docregion key-up-component-1
 @Component({
   selector: 'app-key-up1',
 // #docregion key-up-component-1-template
@@ -32,7 +31,7 @@ export class KeyUpComponent_v1 {
   }
 // #docregion key-up-component-1-class-no-type
 }
-// #enddocregion key-up-component-1,key-up-component-1-class, key-up-component-1-class-no-type
+// #enddocregion key-up-component-1-class, key-up-component-1-class-no-type
 
 //////////////////////////////////////////