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/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 5429ce21c2..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 -->
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..0b31849ca5 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
@@ -14,19 +14,14 @@ export class HighlightDirective {
   constructor(private el: ElementRef) { }
   // #enddocregion ctor
 
-  // #docregion mouse-methods, host
+  // #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;
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/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/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..40c1ea2a43 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>
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/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/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/cart.component.2.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.2.ts
index 459a442fae..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,7 +9,7 @@ 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 = this.cartService.getItems();
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 b689d9a966..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;
 
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 a0cb31c217..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
@@ -11,7 +11,7 @@ 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
+// #docregion inject-form-builder, checkout-form-group
 export class CartComponent {
   // #enddocregion inject-form-builder
   items = this.cartService.getItems();
@@ -19,7 +19,6 @@ export class CartComponent {
     name: '',
     address: ''
   });
-// #enddocregion checkout-form
 // #docregion inject-form-builder
   constructor(
     private cartService: CartService,
@@ -27,12 +26,11 @@ export class CartComponent {
     ) {}
 // #enddocregion inject-form-builder, checkout-form-group
 
-  // #enddocregion props-services
   onSubmit(): void {
     // Process checkout data here
     this.items = this.cartService.clearCart();
     console.warn('Your order has been submitted', this.checkoutForm.value);
     this.checkoutForm.reset();
   }
-// #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.ts b/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
index 1c5056a527..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,7 +12,7 @@ import { CartService } from '../cart.service';
   templateUrl: './product-details.component.html',
   styleUrls: ['./product-details.component.css']
 })
-// #docregion props-methods, inject-cart-service, add-to-cart
+// #docregion inject-cart-service, add-to-cart
 export class ProductDetailsComponent implements OnInit {
 // #enddocregion add-to-cart, inject-cart-service
   product;
@@ -21,28 +20,23 @@ export class ProductDetailsComponent implements OnInit {
 // #docregion inject-cart-service
   constructor(
     private route: ActivatedRoute,
-// #enddocregion props-methods
     private cartService: CartService
-// #docregion props-methods
   ) { }
 // #enddocregion inject-cart-service
 
   ngOnInit() {
-// #enddocregion 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);
-// #docregion props-methods
   }
 
-// #enddocregion props-methods
 // #docregion add-to-cart
   addToCart(product) {
     this.cartService.addToCart(product);
     window.alert('Your product has been added to the cart!');
   }
-// #docregion props-methods, 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/shipping/shipping.component.ts b/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts
index b34536245b..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
@@ -10,7 +10,7 @@ import { CartService } from '../cart.service';
   templateUrl: './shipping.component.html',
   styleUrls: ['./shipping.component.css']
 })
-// #docregion props, ctor
+// #docregion props
 export class ShippingComponent {
   shippingCosts = this.cartService.getShippingPrices();
 // #enddocregion props
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..5afe2d8f8b 100644
--- a/aio/content/examples/http/src/app/config/config.component.ts
+++ b/aio/content/examples/http/src/app/config/config.component.ts
@@ -25,7 +25,7 @@ export class ConfigComponent {
     this.headers = undefined;
   }
 
-  // #docregion v1, v2, v3
+  // #docregion v1, v2
   showConfig() {
     this.configService.getConfig()
   // #enddocregion v1, v2
@@ -34,25 +34,22 @@ 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
       });
-  // #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
 
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/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/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/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 69b4342879..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
@@ -50,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() {
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/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/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/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.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/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.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/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/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.ts b/aio/content/examples/structural-directives/src/app/app.component.ts
index aed11fc77a..68771063c3 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';
@@ -17,7 +16,5 @@ export class AppComponent {
   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-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.html b/aio/content/examples/template-syntax/src/app/app.component.html
index 9098fbc26e..096df75b6e 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,31 @@ 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 -->
 <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 +245,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 +255,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 +277,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 +298,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 +329,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 +365,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 +391,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 +416,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 +443,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 +458,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 +467,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 +474,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 +488,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 +526,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 +558,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 +592,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 +606,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 +632,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 +651,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 +670,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 +682,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 +702,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..7842b82159 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
@@ -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.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..afbe27645e 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
@@ -175,7 +175,6 @@ 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
@@ -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..9b1e2849fc 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
 
 
   });
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/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/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/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.ts b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
index 5beecb0e7d..d3b0c870fa 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,9 +16,7 @@ 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;
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.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/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..020cd6c8e4 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
@@ -21,9 +21,7 @@ export class HeroesComponent implements OnInit {
   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-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.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/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/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/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/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..43ef4a0f00 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 */
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 bb1660e906..8e44b7ccda 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
@@ -50,7 +50,6 @@
   border-radius: 4px 0 0 4px;
 }
 
-/* #docregion additions */
 button {
   background-color: #eee;
   border: none;
@@ -71,5 +70,3 @@ button.delete {
   background-color: gray !important;
   color: white;
 }
-/* #enddocregion additions */
-
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/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-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
 
 //////////////////////////////////////////
 
diff --git a/packages/compiler/src/url_resolver.ts b/packages/compiler/src/url_resolver.ts
index dc13d283ac..6e11f16f7d 100644
--- a/packages/compiler/src/url_resolver.ts
+++ b/packages/compiler/src/url_resolver.ts
@@ -26,7 +26,7 @@ export function createOfflineCompileUrlResolver(): UrlResolver {
  *
  * ## Example
  *
- * {@example compiler/ts/url_resolver/url_resolver.ts region='url_resolver'}
+ * <code-example path="compiler/ts/url_resolver/url_resolver.ts"></code-example>
  *
  * @security  When compiling templates at runtime, you must
  * ensure that the entire template comes from a trusted source.
diff --git a/packages/examples/common/pipes/ts/currency_pipe.ts b/packages/examples/common/pipes/ts/currency_pipe.ts
index f9c2199611..b5d71e726a 100644
--- a/packages/examples/common/pipes/ts/currency_pipe.ts
+++ b/packages/examples/common/pipes/ts/currency_pipe.ts
@@ -45,20 +45,3 @@ export class CurrencyPipeComponent {
   b: number = 1.3495;
 }
 // #enddocregion
-
-// #docregion DeprecatedCurrencyPipe
-@Component({
-  selector: 'deprecated-currency-pipe',
-  template: `<div>
-    <!--output 'CAD0.26'-->
-    <p>A: {{a | currency:'CAD'}}</p>
-
-    <!--output '$0,001.35'-->
-    <p>B: {{b | currency:'CAD':true:'4.2-2'}}</p>
-  </div>`
-})
-export class DeprecatedCurrencyPipeComponent {
-  a: number = 0.259;
-  b: number = 1.3495;
-}
-// #enddocregion
diff --git a/packages/examples/common/pipes/ts/date_pipe.ts b/packages/examples/common/pipes/ts/date_pipe.ts
index 4c0c3ad764..ddd7d334d1 100644
--- a/packages/examples/common/pipes/ts/date_pipe.ts
+++ b/packages/examples/common/pipes/ts/date_pipe.ts
@@ -14,7 +14,6 @@ import localeFr from './locale-fr';
 // registering french data
 registerLocaleData(localeFr);
 
-// #docregion DatePipe
 @Component({
   selector: 'date-pipe',
   template: `<div>
@@ -44,9 +43,6 @@ export class DatePipeComponent {
   today = Date.now();
   fixedTimezone = '2015-06-15T09:03:01+0900';
 }
-// #enddocregion
-
-// #docregion DeprecatedDatePipe
 @Component({
   selector: 'deprecated-date-pipe',
   template: `<div>
@@ -66,4 +62,3 @@ export class DatePipeComponent {
 export class DeprecatedDatePipeComponent {
   today = Date.now();
 }
-// #enddocregion
diff --git a/packages/examples/common/pipes/ts/module.ts b/packages/examples/common/pipes/ts/module.ts
index 47b52b508f..aaff0c30ed 100644
--- a/packages/examples/common/pipes/ts/module.ts
+++ b/packages/examples/common/pipes/ts/module.ts
@@ -10,14 +10,14 @@ import {Component, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 
 import {AsyncObservablePipeComponent, AsyncPromisePipeComponent} from './async_pipe';
-import {CurrencyPipeComponent, DeprecatedCurrencyPipeComponent} from './currency_pipe';
+import {CurrencyPipeComponent} from './currency_pipe';
 import {DatePipeComponent, DeprecatedDatePipeComponent} from './date_pipe';
 import {I18nPluralPipeComponent, I18nSelectPipeComponent} from './i18n_pipe';
 import {JsonPipeComponent} from './json_pipe';
 import {KeyValuePipeComponent} from './keyvalue_pipe';
 import {LowerUpperPipeComponent} from './lowerupper_pipe';
-import {DeprecatedNumberPipeComponent, NumberPipeComponent} from './number_pipe';
-import {DeprecatedPercentPipeComponent, PercentPipeComponent} from './percent_pipe';
+import {NumberPipeComponent} from './number_pipe';
+import {PercentPipeComponent} from './percent_pipe';
 import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe';
 import {TitleCasePipeComponent} from './titlecase_pipe';
 
@@ -66,10 +66,8 @@ export class AppComponent {
   declarations: [
     AsyncPromisePipeComponent, AsyncObservablePipeComponent, AppComponent, JsonPipeComponent,
     DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, TitleCasePipeComponent,
-    NumberPipeComponent, DeprecatedNumberPipeComponent, PercentPipeComponent,
-    DeprecatedPercentPipeComponent, CurrencyPipeComponent, DeprecatedCurrencyPipeComponent,
-    SlicePipeStringComponent, SlicePipeListComponent, I18nPluralPipeComponent,
-    I18nSelectPipeComponent, KeyValuePipeComponent
+    NumberPipeComponent, PercentPipeComponent, CurrencyPipeComponent, SlicePipeStringComponent,
+    SlicePipeListComponent, I18nPluralPipeComponent, I18nSelectPipeComponent, KeyValuePipeComponent
   ],
   imports: [BrowserModule],
 })
diff --git a/packages/examples/common/pipes/ts/number_pipe.ts b/packages/examples/common/pipes/ts/number_pipe.ts
index 6ce1689f6e..f0178ea9ff 100644
--- a/packages/examples/common/pipes/ts/number_pipe.ts
+++ b/packages/examples/common/pipes/ts/number_pipe.ts
@@ -48,19 +48,3 @@ export class NumberPipeComponent {
   e: number = 2.718281828459045;
 }
 // #enddocregion
-
-// #docregion DeprecatedNumberPipe
-@Component({
-  selector: 'deprecated-number-pipe',
-  template: `<div>
-    <p>e (no formatting): {{e}}</p>
-    <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
-    <p>pi (no formatting): {{pi}}</p>
-    <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
-  </div>`
-})
-export class DeprecatedNumberPipeComponent {
-  pi: number = 3.141592;
-  e: number = 2.718281828459045;
-}
-// #enddocregion
diff --git a/packages/examples/common/pipes/ts/percent_pipe.ts b/packages/examples/common/pipes/ts/percent_pipe.ts
index 68cf159b33..15b3c15a48 100644
--- a/packages/examples/common/pipes/ts/percent_pipe.ts
+++ b/packages/examples/common/pipes/ts/percent_pipe.ts
@@ -33,20 +33,3 @@ export class PercentPipeComponent {
   b: number = 1.3495;
 }
 // #enddocregion
-
-// #docregion DeprecatedPercentPipe
-@Component({
-  selector: 'deprecated-percent-pipe',
-  template: `<div>
-    <!--output '25.9%'-->
-    <p>A: {{a | percent}}</p>
-
-    <!--output '0,134.95%'-->
-    <p>B: {{b | percent:'4.3-5'}}</p>
-  </div>`
-})
-export class DeprecatedPercentPipeComponent {
-  a: number = 0.259;
-  b: number = 1.3495;
-}
-// #enddocregion
diff --git a/packages/examples/compiler/ts/url_resolver/url_resolver.ts b/packages/examples/compiler/ts/url_resolver/url_resolver.ts
index e89c2dee07..e2f20fb047 100644
--- a/packages/examples/compiler/ts/url_resolver/url_resolver.ts
+++ b/packages/examples/compiler/ts/url_resolver/url_resolver.ts
@@ -15,7 +15,6 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 class MyApp {
 }
 
-// #docregion url_resolver
 class MyUrlResolver extends UrlResolver {
   resolve(baseUrl: string, url: string): string {
     // Serve CSS files from a special CDN.
@@ -37,4 +36,3 @@ class AppModule {
 export function main() {
   platformBrowserDynamic().bootstrapModule(AppModule);
 }
-// #enddocregion
diff --git a/packages/examples/core/animation/ts/dsl/animation_example.ts b/packages/examples/core/animation/ts/dsl/animation_example.ts
index 6178c4eb27..54857ae2f1 100644
--- a/packages/examples/core/animation/ts/dsl/animation_example.ts
+++ b/packages/examples/core/animation/ts/dsl/animation_example.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// #docregion Component
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {Component, NgModule} from '@angular/core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -59,5 +58,3 @@ export class MyExpandoCmp {
     {imports: [BrowserAnimationsModule], declarations: [MyExpandoCmp], bootstrap: [MyExpandoCmp]})
 export class AppModule {
 }
-
-// #enddocregion
diff --git a/packages/examples/core/debug/ts/debug_element/debug_element.ts b/packages/examples/core/debug/ts/debug_element/debug_element.ts
index de7789cf6c..a9ae6e7cea 100644
--- a/packages/examples/core/debug/ts/debug_element/debug_element.ts
+++ b/packages/examples/core/debug/ts/debug_element/debug_element.ts
@@ -11,6 +11,4 @@ import {DebugElement} from '@angular/core';
 let debugElement: DebugElement = undefined!;
 let predicate: any;
 
-// #docregion scope_all
 debugElement.query(predicate);
-// #enddocregion
diff --git a/packages/examples/core/testing/ts/fake_async.ts b/packages/examples/core/testing/ts/fake_async.ts
index a09231d2fe..a26bb90804 100644
--- a/packages/examples/core/testing/ts/fake_async.ts
+++ b/packages/examples/core/testing/ts/fake_async.ts
@@ -25,7 +25,6 @@ describe('this test', () => {
 });
 // #enddocregion
 
-// #docregion pending
 describe('this test', () => {
   it('aborts a periodic timer', <any>fakeAsync((): void => {
        // This timer is scheduled but doesn't need to complete for the
@@ -37,4 +36,3 @@ describe('this test', () => {
        discardPeriodicTasks();
      }));
 });
-// #enddocregion
diff --git a/packages/examples/core/ts/bootstrap/bootstrap.ts b/packages/examples/core/ts/bootstrap/bootstrap.ts
index af2f28c610..51d797f2cb 100644
--- a/packages/examples/core/ts/bootstrap/bootstrap.ts
+++ b/packages/examples/core/ts/bootstrap/bootstrap.ts
@@ -10,7 +10,6 @@ import {Component, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-// #docregion bootstrap
 @Component({selector: 'my-app', template: 'Hello {{ name }}!'})
 class MyApp {
   name: string = 'World';
@@ -23,5 +22,3 @@ class AppModule {
 export function main() {
   platformBrowserDynamic().bootstrapModule(AppModule);
 }
-
-// #enddocregion
diff --git a/packages/examples/core/ts/metadata/metadata.ts b/packages/examples/core/ts/metadata/metadata.ts
index 7b5bec14d9..c46a01dd22 100644
--- a/packages/examples/core/ts/metadata/metadata.ts
+++ b/packages/examples/core/ts/metadata/metadata.ts
@@ -10,12 +10,10 @@ import {Attribute, Component, Directive, Pipe} from '@angular/core';
 
 class CustomDirective {}
 
-// #docregion component
 @Component({selector: 'greet', template: 'Hello {{name}}!'})
 class Greet {
   name: string = 'World';
 }
-// #enddocregion
 
 // #docregion attributeFactory
 @Component({selector: 'page', template: 'Title: {{title}}'})
@@ -36,20 +34,16 @@ class InputAttrDirective {
 }
 // #enddocregion
 
-// #docregion directive
 @Directive({selector: 'input'})
 class InputDirective {
   constructor() {
     // Add some logic.
   }
 }
-// #enddocregion
 
-// #docregion pipe
 @Pipe({name: 'lowercase'})
 class Lowercase {
   transform(v: string, args: any[]) {
     return v.toLowerCase();
   }
 }
-// #enddocregion
diff --git a/packages/examples/core/ts/prod_mode/prod_mode_example.ts b/packages/examples/core/ts/prod_mode/prod_mode_example.ts
index 665d066b09..a5d50dec1f 100644
--- a/packages/examples/core/ts/prod_mode/prod_mode_example.ts
+++ b/packages/examples/core/ts/prod_mode/prod_mode_example.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// #docregion enableProdMode
 import {enableProdMode, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@@ -20,4 +19,3 @@ export class AppModule {
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule);
-// #enddocregion
diff --git a/packages/examples/forms/ts/formBuilder/form_builder_example.ts b/packages/examples/forms/ts/formBuilder/form_builder_example.ts
index de94331989..6e1044ad80 100644
--- a/packages/examples/forms/ts/formBuilder/form_builder_example.ts
+++ b/packages/examples/forms/ts/formBuilder/form_builder_example.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// #docregion Component, disabled-control
+// #docregion disabled-control
 import {Component, Inject} from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 // #enddocregion disabled-control
@@ -42,7 +42,6 @@ export class FormBuilderComp {
         {updateOn: 'change'});
   }
 }
-// #enddocregion
 
 // #docregion disabled-control
 @Component({
diff --git a/packages/examples/forms/ts/radioButtons/radio_button_example.ts b/packages/examples/forms/ts/radioButtons/radio_button_example.ts
index 5066404bf8..8e10bc7da6 100644
--- a/packages/examples/forms/ts/radioButtons/radio_button_example.ts
+++ b/packages/examples/forms/ts/radioButtons/radio_button_example.ts
@@ -5,8 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
-// #docregion TemplateDriven
 import {Component} from '@angular/core';
 
 @Component({
@@ -25,4 +23,3 @@ import {Component} from '@angular/core';
 export class RadioButtonComp {
   myFood = 'lamb';
 }
-// #enddocregion
diff --git a/packages/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts b/packages/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts
index b8b4a66dbc..a02769e781 100644
--- a/packages/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts
+++ b/packages/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts
@@ -14,10 +14,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 @Component({selector: 'my-component', template: 'text'})
 class MyAppComponent {
 }
-
-// #docregion providers
 @NgModule({imports: [BrowserModule], bootstrap: [MyAppComponent]})
 class AppModule {
 }
 platformBrowserDynamic().bootstrapModule(AppModule);
-// #enddocregion
diff --git a/packages/examples/testing/ts/testing.ts b/packages/examples/testing/ts/testing.ts
index c17fa3c05b..16db49e745 100644
--- a/packages/examples/testing/ts/testing.ts
+++ b/packages/examples/testing/ts/testing.ts
@@ -11,16 +11,13 @@ let db: any;
 class MyService {}
 class MyMockService implements MyService {}
 
-// #docregion describeIt
 describe('some component', () => {
   it('does something',
      () => {
          // This is a test.
      });
 });
-// #enddocregion
 
-// #docregion fdescribe
 /* tslint:disable-next-line:no-jasmine-focus */
 fdescribe('some component', () => {
   it('has a test',
@@ -33,9 +30,7 @@ describe('another component', () => {
     throw 'This test will not run.';
   });
 });
-// #enddocregion
 
-// #docregion xdescribe
 xdescribe('some component', () => {
   it('has a test', () => {
     throw 'This test will not run.';
@@ -47,9 +42,7 @@ describe('another component', () => {
          // This test will run.
      });
 });
-// #enddocregion
 
-// #docregion fit
 describe('some component', () => {
   /* tslint:disable-next-line:no-jasmine-focus */
   fit('has a test',
@@ -60,9 +53,7 @@ describe('some component', () => {
     throw 'This test will not run.';
   });
 });
-// #enddocregion
 
-// #docregion xit
 describe('some component', () => {
   xit('has a test', () => {
     throw 'This test will not run.';
@@ -72,9 +63,7 @@ describe('some component', () => {
          // This test will run.
      });
 });
-// #enddocregion
 
-// #docregion beforeEach
 describe('some component', () => {
   beforeEach(() => {
     db.connect();
@@ -84,9 +73,7 @@ describe('some component', () => {
          // Database is connected.
      });
 });
-// #enddocregion
 
-// #docregion afterEach
 describe('some component', () => {
   afterEach((done: Function) => {
     db.reset().then((_: any) => done());
@@ -97,4 +84,3 @@ describe('some component', () => {
          // The afterEach will ensure it gets reset.
      });
 });
-// #enddocregion
diff --git a/packages/examples/upgrade/static/ts/full/module.ts b/packages/examples/upgrade/static/ts/full/module.ts
index 4ca5413201..fd4f29d7e1 100644
--- a/packages/examples/upgrade/static/ts/full/module.ts
+++ b/packages/examples/upgrade/static/ts/full/module.ts
@@ -26,7 +26,6 @@ export class TextFormatter {
 }
 
 // #enddocregion
-// #docregion Angular Stuff
 // #docregion ng2-heroes
 // This Angular component will be "downgraded" to be used in AngularJS
 @Component({
@@ -120,14 +119,10 @@ export class Ng2AppModule {
 }
 // #enddocregion bootstrap-ng1
 // #enddocregion ng2-module
-// #enddocregion
 
 
-// #docregion Angular 1 Stuff
-// #docregion ng1-module
 // This Angular 1 module represents the AngularJS pieces of the application
 export const ng1AppModule: ng.IModule = angular.module('ng1AppModule', []);
-// #enddocregion
 
 // #docregion ng1-hero
 // This AngularJS component will be "upgraded" to be used in Angular
@@ -178,7 +173,6 @@ ng1AppModule.component('exampleApp', {
           </ng2-heroes>`
 });
 // #enddocregion
-// #enddocregion
 
 
 // #docregion bootstrap-ng2