diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
index 0cc78d277e..3a17abd281 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
@@ -1,7 +1,7 @@
+// #docregion
 import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
-// #docregion
 @Component({
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
index 4ea4c11611..2976ec605e 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
@@ -1,3 +1,4 @@
+// #docregion
 // #docregion metadata
 import { Component } from '@angular/core';
 
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
index dfbecf0707..a18b1ba777 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
@@ -1,7 +1,7 @@
+// #docregion
 import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
-// #docregion
 export class HeroComponent {
   constructor(dataService) {
     this.name = dataService.getHeroName();
@@ -18,5 +18,4 @@ HeroComponent.annotations = [
 HeroComponent.parameters = [
   [DataService]
 ];
-
 // #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
index 10b92c2878..350f946460 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
@@ -1,4 +1,5 @@
 // #docplaster
+// #docregion
 // #docregion metadata
 import { Component } from '@angular/core';
 
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
index 4a4cd0a470..2cac6b032b 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
@@ -1,38 +1,36 @@
 (function(app) {
 
-// #docregion
-app.ConfirmComponent = ConfirmComponent;
+  // #docregion
+  app.ConfirmComponent = ConfirmComponent;
 
-ConfirmComponent.annotations = [
-  new ng.core.Component({
-    selector: 'app-confirm',
-    templateUrl: 'app/confirm.component.html',
-    inputs: [
-      'okMsg',
-      'notOkMsg: cancelMsg'
-    ],
-    outputs: [
-      'ok',
-      'notOk: cancel'
-    ]
-  })
-];
+  ConfirmComponent.annotations = [
+    new ng.core.Component({
+      selector: 'app-confirm',
+      templateUrl: 'app/confirm.component.html',
+      inputs: [
+        'okMsg',
+        'notOkMsg: cancelMsg'
+      ],
+      outputs: [
+        'ok',
+        'notOk: cancel'
+      ]
+    })
+  ];
 
-function ConfirmComponent() {
-  this.ok    = new ng.core.EventEmitter();
-  this.notOk = new ng.core.EventEmitter();
-}
+  function ConfirmComponent() {
+    this.ok    = new ng.core.EventEmitter();
+    this.notOk = new ng.core.EventEmitter();
+  }
 
-ConfirmComponent.prototype.onOkClick = function() {
-  this.ok.emit(true);
-}
+  ConfirmComponent.prototype.onOkClick = function() {
+    this.ok.emit(true);
+  }
 
-ConfirmComponent.prototype.onNotOkClick = function() {
-  this.notOk.emit(true);
-}
-
-
-// #enddocregion
+  ConfirmComponent.prototype.onNotOkClick = function() {
+    this.notOk.emit(true);
+  }
+  // #enddocregion
 
 })(window.app = window.app || {});
 
@@ -40,8 +38,10 @@ ConfirmComponent.prototype.onNotOkClick = function() {
 
 (function(app) {
 
-// #docregion dsl
-app.ConfirmDslComponent = ng.core.Component({
+  var old = app.ConfirmComponent;
+
+  // #docregion dsl
+  app.ConfirmComponent = ng.core.Component({
     selector: 'app-confirm-dsl',
     templateUrl: 'app/confirm.component.html',
     inputs: [
@@ -54,7 +54,7 @@ app.ConfirmDslComponent = ng.core.Component({
     ]
   })
   .Class({
-    constructor: function ConfirmDslComponent() {
+    constructor: function ConfirmComponent() {
       this.ok    = new ng.core.EventEmitter();
       this.notOk = new ng.core.EventEmitter();
     },
@@ -67,7 +67,9 @@ app.ConfirmDslComponent = ng.core.Component({
       this.notOk.emit(true);
     }
   });
+  // #enddocregion dsl
 
-// #enddocregion dsl
+  app.ConfirmDslComponent = app.ConfirmComponent;
+  app.ConfirmComponent = old;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
index 1a88cfa355..450cc53847 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
@@ -1,26 +1,36 @@
 (function(app) {
 
-app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent;
+  var old = app.HeroComponent;
 
-HeroDIInjectAdditionalComponent.annotations = [
-  new ng.core.Component({
-    selector: 'hero-di-inject-additional',
-    template: '<hero-title title="Tour of Heroes"></hero-title>'
-  })
-];
+  app.HeroComponent = HeroComponent;
 
-function HeroDIInjectAdditionalComponent() {}
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di-inject-additional',
+      template: '<hero-title title="Tour of Heroes"></hero-title>'
+    })
+  ];
+
+  function HeroComponent() {}
+
+  app.HeroDIInjectAdditionalComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
 ////// DSL Version /////////
 (function(app) {
 
-app.HeroDIInjectAdditionalDslComponent = ng.core.Component({
-  selector: 'hero-di-inject-additional-dsl',
-  template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
-}).Class({
-  constructor: function HeroDIInjectAdditionalDslComponent() { }
-});
+  var old = app.HeroComponent;
+
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-di-inject-additional-dsl',
+    template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
+  }).Class({
+    constructor: function HeroComponent() { }
+  });
+
+  app.HeroDIInjectAdditionalDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
index 2e04c9246e..879365208c 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
@@ -1,21 +1,26 @@
 (function(app) {
 
-// #docregion
-app.HeroDIInjectComponent = HeroDIInjectComponent;
+  var old = app.HeroComponent;
 
-HeroDIInjectComponent.annotations = [
-  new ng.core.Component({
-    selector: 'hero-di-inject',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-];
+  // #docregion
+  app.HeroComponent = HeroComponent;
 
-HeroDIInjectComponent.parameters = [ 'heroName' ];
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di-inject',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
 
-function HeroDIInjectComponent(name) {
-  this.name = name;
-}
-// #enddocregion
+  HeroComponent.parameters = [ 'heroName' ];
+
+  function HeroComponent(name) {
+    this.name = name;
+  }
+  // #enddocregion
+
+  app.HeroDIInjectComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -23,19 +28,24 @@ function HeroDIInjectComponent(name) {
 
 (function(app) {
 
-// #docregion dsl
-app.HeroDIInjectDslComponent = ng.core.Component({
-  selector: 'hero-di-inject-dsl',
-  template: '<h1>Hero: {{name}}</h1>'
-})
-.Class({
-  constructor: [
-    new ng.core.Inject('heroName'),
-    function HeroDIInjectDslComponent(name) {
-      this.name = name;
-    }
-  ]
-});
-// #enddocregion dsl
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-di-inject-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: [
+      new ng.core.Inject('heroName'),
+      function HeroComponent(name) {
+        this.name = name;
+      }
+    ]
+  });
+  // #enddocregion dsl
+
+  app.HeroDIInjectDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
index c80efe193e..2f49a85079 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
@@ -1,23 +1,26 @@
 (function(app) {
 
-  // #docregion
-  app.HeroDIComponent = HeroDIComponent;
+  var old = app.HeroComponent;
 
-  HeroDIComponent.annotations = [
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-di',
       template: '<h1>Hero: {{name}}</h1>'
     })
   ];
 
-  HeroDIComponent.parameters = [ app.DataService ];
+  HeroComponent.parameters = [ app.DataService ];
 
-  function HeroDIComponent(dataService) {
+  function HeroComponent(dataService) {
     this.name = dataService.getHeroName();
   }
-
   // #enddocregion
 
+  app.HeroDIComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -25,19 +28,24 @@
 
 (function(app) {
 
-// #docregion dsl
-app.HeroDIDslComponent = ng.core.Component({
-  selector: 'hero-di-dsl',
-  template: '<h1>Hero: {{name}}</h1>'
-})
-.Class({
-  constructor: [
-    app.DataService,
-    function HeroDIDslComponent(service) {
-      this.name = service.getHeroName();
-    }
-  ]
-});
-// #enddocregion dsl
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-di-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: [
+      app.DataService,
+      function HeroComponent(service) {
+        this.name = service.getHeroName();
+      }
+    ]
+  });
+  // #enddocregion dsl
+
+  app.HeroDIDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
index 0b04d5efae..b73e50aae0 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
@@ -1,49 +1,54 @@
 (function(app) {
 
-// #docregion
-app.HeroHostComponent = HeroHostComponent;
+  var old = app.HeroComponent
 
-HeroHostComponent.annotations = [
-  new ng.core.Component({
-    selector: 'hero-host',
-    template:
-      '<h1 [class.active]="active">Hero Host</h1>' +
-      '<div>Heading clicks: {{clicks}}</div>',
-    host: {
-      // HostBindings to the <hero-host> element
-      '[title]': 'title',
-      '[class.heading]': 'headingClass',
-      '(click)': 'clicked()',
+  // #docregion
+  app.HeroComponent = HeroComponent;
 
-      // HostListeners on the entire <hero-host> element
-      '(mouseenter)': 'enter($event)',
-      '(mouseleave)': 'leave($event)'
-    },
-    // Styles within (but excluding) the <hero-host> element
-    styles: ['.active {background-color: yellow;}']
-  })
-];
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-host',
+      template:
+        '<h1 [class.active]="active">Hero Host</h1>' +
+        '<div>Heading clicks: {{clicks}}</div>',
+      host: {
+        // HostBindings to the <hero-host> element
+        '[title]': 'title',
+        '[class.heading]': 'headingClass',
+        '(click)': 'clicked()',
 
-function HeroHostComponent() {
-  this.clicks = 0;
-  this.headingClass = true;
-  this.title = 'Hero Host Tooltip content';
-}
+        // HostListeners on the entire <hero-host> element
+        '(mouseenter)': 'enter($event)',
+        '(mouseleave)': 'leave($event)'
+      },
+      // Styles within (but excluding) the <hero-host> element
+      styles: ['.active {background-color: yellow;}']
+    })
+  ];
 
-HeroHostComponent.prototype.clicked = function() {
-  this.clicks += 1;
-}
+  function HeroComponent() {
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip content';
+  }
 
-HeroHostComponent.prototype.enter = function(event) {
-  this.active = true;
-  this.headingClass = false;
-}
+  HeroComponent.prototype.clicked = function() {
+    this.clicks += 1;
+  }
 
-HeroHostComponent.prototype.leave = function(event) {
-  this.active = false;
-  this.headingClass = true;
-}
-// #enddocregion
+  HeroComponent.prototype.enter = function(event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  HeroComponent.prototype.leave = function(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+  // #enddocregion
+
+  app.HeroHostComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -51,47 +56,52 @@ HeroHostComponent.prototype.leave = function(event) {
 
 (function(app) {
 
-// #docregion dsl
-app.HeroHostDslComponent = ng.core.Component({
-  selector: 'hero-host-dsl',
-  template: `
-    <h1 [class.active]="active">Hero Host (DSL)</h1>
-    <div>Heading clicks: {{clicks}}</div>
-  `,
-  host: {
-    // HostBindings to the <hero-host-dsl> element
-    '[title]': 'title',
-    '[class.heading]': 'headingClass',
-    '(click)': 'clicked()',
+  var old = app.HeroComponent;
 
-    // HostListeners on the entire <hero-host-dsl> element
-    '(mouseenter)': 'enter($event)',
-    '(mouseleave)': 'leave($event)'
-  },
-  // Styles within (but excluding) the <hero-host-dsl> element
-  styles: ['.active {background-color: coral;}']
-})
-.Class({
-  constructor: function HeroHostDslComponent() {
-    this.clicks = 0;
-    this.headingClass = true;
-    this.title = 'Hero Host Tooltip DSL content';
-  },
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-host-dsl',
+    template: `
+      <h1 [class.active]="active">Hero Host (DSL)</h1>
+      <div>Heading clicks: {{clicks}}</div>
+    `,
+    host: {
+      // HostBindings to the <hero-host-dsl> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
 
-  clicked() {
-    this.clicks += 1;
-  },
+      // HostListeners on the entire <hero-host-dsl> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host-dsl> element
+    styles: ['.active {background-color: coral;}']
+  })
+  .Class({
+    constructor: function HeroComponent() {
+      this.clicks = 0;
+      this.headingClass = true;
+      this.title = 'Hero Host Tooltip DSL content';
+    },
 
-  enter(event) {
-    this.active = true;
-    this.headingClass = false;
-  },
+    clicked() {
+      this.clicks += 1;
+    },
 
-  leave(event) {
-    this.active = false;
-    this.headingClass = true;
-  }
-});
-// #enddocregion dsl
+    enter(event) {
+      this.active = true;
+      this.headingClass = false;
+    },
+
+    leave(event) {
+      this.active = false;
+      this.headingClass = true;
+    }
+  });
+  // #enddocregion dsl
+
+  app.HeroHostDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
index d35f3762da..b09208ce68 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
@@ -1,23 +1,28 @@
 (function(app) {
 
-app.HeroIOComponent = HeroComponent;
+  var old = app.HeroComponent
 
-HeroComponent.annotations = [
-  new ng.core.Component({
-    selector: 'hero-io',
-    templateUrl: 'app/hero-io.component.html'
-  })
-];
+  app.HeroComponent = HeroComponent;
 
-function HeroComponent() { }
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-io',
+      templateUrl: 'app/hero-io.component.html'
+    })
+  ];
 
-HeroComponent.prototype.onOk = function() {
-  this.okClicked = true;
-}
+  function HeroComponent() { }
 
-HeroComponent.prototype.onCancel = function() {
-  this.cancelClicked = true;
-}
+  HeroComponent.prototype.onOk = function() {
+    this.okClicked = true;
+  }
+
+  HeroComponent.prototype.onCancel = function() {
+    this.cancelClicked = true;
+  }
+
+  app.HeroIOComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -25,12 +30,14 @@ HeroComponent.prototype.onCancel = function() {
 
 (function(app) {
 
-app.HeroIODslComponent = ng.core.Component({
+  var old = app.HeroComponent
+
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-io-dsl',
     templateUrl: 'app/hero-io-dsl.component.html'
   })
   .Class({
-    constructor: function HeroIODslComponent() { },
+    constructor: function HeroComponent() { },
     onOk: function() {
       this.okClicked = true;
     },
@@ -39,4 +46,7 @@ app.HeroIODslComponent = ng.core.Component({
     }
   });
 
+  app.HeroIODslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
index 94aa3514b2..2a68288f92 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
@@ -1,23 +1,28 @@
 // #docplaster
 (function(app) {
 
-// #docregion
-app.HeroLifecycleComponent = HeroComponent;
+  var old = app.HeroComponent;
 
-HeroComponent.annotations = [
-  new ng.core.Component({
-    selector: 'hero-lifecycle',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-];
+  // #docregion
+  app.HeroComponent = HeroComponent;
 
-function HeroComponent() { }
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-lifecycle',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
 
-HeroComponent.prototype.ngOnInit = function() {
-  // todo: fetch from server async
-  setTimeout(() => this.name = 'Windstorm', 0);
-};
-// #enddocregion
+  function HeroComponent() { }
+
+  HeroComponent.prototype.ngOnInit = function() {
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
+  };
+  // #enddocregion
+
+  app.HeroLifecycleComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
 
@@ -25,18 +30,23 @@ HeroComponent.prototype.ngOnInit = function() {
 
 (function(app) {
 
-// #docregion dsl
-app.HeroLifecycleDslComponent = ng.core.Component({
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-lifecycle-dsl',
     template: '<h1>Hero: {{name}}</h1>'
   })
   .Class({
-    constructor: function HeroLifecycleDslComponent() { },
+    constructor: function HeroComponent() { },
     ngOnInit: function() {
       // todo: fetch from server async
       setTimeout(() => this.name = 'Windstorm', 0);
     }
   });
-// #enddocregion dsl
+  // #enddocregion dsl
+
+  app.HeroLifecycleDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
index 5e21cfcb0b..5e8de58d41 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
@@ -1,92 +1,92 @@
 (function(app) {
 
-app.heroQueries = app.heroQueries || {};
+  app.heroQueries = app.heroQueries || {};
 
-app.heroQueries.ContentChildComponent = ng.core.Component({
-  selector: 'content-child',
-  template:
-    '<span class="content-child" *ngIf="active">' +
-      'Active' +
-    '</span>'
-}).Class({
-  constructor: function ContentChildComponent() {
-    this.active = false;
-  },
-
-  activate: function() {
-    this.active = !this.active;
-  }
-});
-
-////////////////////
-
-// #docregion content
-app.heroQueries.ViewChildComponent = ng.core.Component({
-  selector: 'view-child',
-  template:
-    '<h2 [class.active]=active>' +
-      '{{hero.name}} ' +
-      '<ng-content></ng-content>' +
-    '</h2>',
-  styles: ['.active {font-weight: bold; background-color: skyblue;}'],
-  inputs: ['hero'],
-  queries: {
-    content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
-  }
-})
-.Class({
-  constructor: function HeroQueriesHeroComponent() {
-    this.active = false;
-  },
-
-  activate: function() {
-    this.active = !this.active;
-    this.content.activate();
-  }
-});
-// #enddocregion content
-
-////////////////////
-
-// #docregion view
-app.heroQueries.HeroQueriesComponent = ng.core.Component({
-  selector: 'hero-queries',
-  template:
-    '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
-      '<content-child></content-child>' +
-    '</view-child>' +
-    '<button (click)="activate()">{{buttonLabel}} All</button>',
-  queries: {
-    views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
-  }
-})
-.Class({
-  constructor: function HeroQueriesComponent() {
-    this.active = false;
-    this.heroData = [
-      {id: 1, name: 'Windstorm'},
-      {id: 2, name: 'LaughingGas'}
-    ];
-  },
-
-  activate: function() {
-    this.active = !this.active;
-    this.views.forEach(function(view) {
-      view.activate();
-    });
-  },
-});
-
-// #docregion defined-property
-// add prototype property w/ getter outside the DSL
-var proto = app.heroQueries.HeroQueriesComponent.prototype;
-Object.defineProperty(proto, "buttonLabel", {
-    get: function () {
-        return this.active ? 'Deactivate' : 'Activate';
+  app.heroQueries.ContentChildComponent = ng.core.Component({
+    selector: 'content-child',
+    template:
+      '<span class="content-child" *ngIf="active">' +
+        'Active' +
+      '</span>'
+  }).Class({
+    constructor: function ContentChildComponent() {
+      this.active = false;
     },
-    enumerable: true
-});
-// #enddocregion defined-property
-// #enddocregion view
+
+    activate: function() {
+      this.active = !this.active;
+    }
+  });
+
+  ////////////////////
+
+  // #docregion content
+  app.heroQueries.ViewChildComponent = ng.core.Component({
+    selector: 'view-child',
+    template:
+      '<h2 [class.active]=active>' +
+        '{{hero.name}} ' +
+        '<ng-content></ng-content>' +
+      '</h2>',
+    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+    inputs: ['hero'],
+    queries: {
+      content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
+    }
+  })
+  .Class({
+    constructor: function HeroQueriesHeroComponent() {
+      this.active = false;
+    },
+
+    activate: function() {
+      this.active = !this.active;
+      this.content.activate();
+    }
+  });
+  // #enddocregion content
+
+  ////////////////////
+
+  // #docregion view
+  app.heroQueries.HeroQueriesComponent = ng.core.Component({
+    selector: 'hero-queries',
+    template:
+      '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
+        '<content-child></content-child>' +
+      '</view-child>' +
+      '<button (click)="activate()">{{buttonLabel}} All</button>',
+    queries: {
+      views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
+    }
+  })
+  .Class({
+    constructor: function HeroQueriesComponent() {
+      this.active = false;
+      this.heroData = [
+        {id: 1, name: 'Windstorm'},
+        {id: 2, name: 'LaughingGas'}
+      ];
+    },
+
+    activate: function() {
+      this.active = !this.active;
+      this.views.forEach(function(view) {
+        view.activate();
+      });
+    },
+  });
+
+  // #docregion defined-property
+  // add prototype property w/ getter outside the DSL
+  var proto = app.heroQueries.HeroQueriesComponent.prototype;
+  Object.defineProperty(proto, "buttonLabel", {
+      get: function () {
+          return this.active ? 'Deactivate' : 'Activate';
+      },
+      enumerable: true
+  });
+  // #enddocregion defined-property
+  // #enddocregion view
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
index 9a8ce7e578..f0770e1228 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
@@ -1,33 +1,32 @@
 (function(app) {
 
-// #docregion
-app.HeroTitleComponent = HeroTitleComponent;
+  // #docregion
+  app.HeroTitleComponent = HeroTitleComponent;
 
-// #docregion templateUrl
-HeroTitleComponent.annotations = [
-  new ng.core.Component({
-    selector: 'hero-title',
-    templateUrl: 'app/hero-title.component.html'
-  })
-];
-// #enddocregion templateUrl
+  // #docregion templateUrl
+  HeroTitleComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-title',
+      templateUrl: 'app/hero-title.component.html'
+    })
+  ];
+  // #enddocregion templateUrl
 
-function HeroTitleComponent(titlePrefix, title) {
-    this.titlePrefix = titlePrefix;
-    this.title  = title;
-    this.msg = '';
-}
+  function HeroTitleComponent(titlePrefix, title) {
+      this.titlePrefix = titlePrefix;
+      this.title  = title;
+      this.msg = '';
+  }
 
-HeroTitleComponent.prototype.ok = function() {
-  this.msg = 'OK!';
-}
+  HeroTitleComponent.prototype.ok = function() {
+    this.msg = 'OK!';
+  }
 
-HeroTitleComponent.parameters = [
-  [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
-  [new ng.core.Attribute('title')]
-];
-
-// #enddocregion
+  HeroTitleComponent.parameters = [
+    [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
+    [new ng.core.Attribute('title')]
+  ];
+  // #enddocregion
 
 })(window.app = window.app || {});
 
@@ -35,26 +34,31 @@ HeroTitleComponent.parameters = [
 
 (function(app) {
 
-// #docregion dsl
-app.HeroTitleDslComponent = ng.core.Component({
-  selector: 'hero-title-dsl',
-  templateUrl: 'app/hero-title.component.html'
-})
-.Class({
-  constructor: [
-    [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
-    new ng.core.Attribute('title'),
-    function HeroTitleDslComponent(titlePrefix, title) {
-      this.titlePrefix = titlePrefix;
-      this.title  = title;
-      this.msg = '';
-    }
-  ],
+  var old = app.HeroTitleComponent;
 
-  ok: function() {
-    this.msg = 'OK!';
-  }
-});
-// #enddocregion dsl
+  // #docregion dsl
+  app.HeroTitleComponent = ng.core.Component({
+    selector: 'hero-title-dsl',
+    templateUrl: 'app/hero-title.component.html'
+  })
+  .Class({
+    constructor: [
+      [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
+      new ng.core.Attribute('title'),
+      function HeroTitleComponent(titlePrefix, title) {
+        this.titlePrefix = titlePrefix;
+        this.title  = title;
+        this.msg = '';
+      }
+    ],
+
+    ok: function() {
+      this.msg = 'OK!';
+    }
+  });
+  // #enddocregion dsl
+
+  app.HeroTitleDslComponent = app.HeroTitleComponent;
+  app.HeroTitleComponent = old;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
index 346d6f03d8..e1407b2635 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
@@ -31,18 +31,23 @@ HeroComponent.prototype.getName = function() { return 'Windstorm'; };
 
 (function(app) {
 
-// #docregion dsl
-app.HeroDslComponent = ng.core.Component({
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
     selector: 'hero-view-dsl',
     template: '<h1>{{title}}: {{getName()}}</h1>',
   })
   .Class({
-    constructor: function HeroDslComponent() {
+    constructor: function HeroComponent() {
       this.title = "Hero Detail";
     },
 
     getName: function() { return 'Windstorm'; }
   });
-// #enddocregion dsl
+  // #enddocregion dsl
+
+  app.HeroDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
index 0cc78d277e..3a17abd281 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
@@ -1,7 +1,7 @@
+// #docregion
 import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
-// #docregion
 @Component({
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
index 4ea4c11611..2976ec605e 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
@@ -1,3 +1,4 @@
+// #docregion
 // #docregion metadata
 import { Component } from '@angular/core';