docs(rc5): update docs and plunkers for rc5

gulpfile.js

@@ -595,7 +595,7 @@ gulp.task('build-dart-api-docs', ['_shred-api-examples', 'dartdoc'], function()
 });
 
 gulp.task('build-plunkers', ['_copy-example-boilerplate'], function() {
-  return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
+  return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build });
 });
 
 gulp.task('build-dart-cheatsheet', [], function() {

package.json

@@ -32,7 +32,7 @@
     "browser-sync": "^2.9.3",
     "canonical-path": "0.0.2",
     "cheerio": "^0.20.0",
-    "codelyzer": "0.0.22",
+    "codelyzer": "0.0.26",
     "cross-spawn": "^4.0.0",
     "del": "^2.2.0",
     "dgeni": "^0.4.0",

public/docs/_examples/animations/ts/app/app.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HeroTeamBuilderComponent } from './hero-team-builder.component';
+import { HeroListBasicComponent } from './hero-list-basic.component';
+import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
+import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
+import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component';
+import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
+import { HeroListTwowayComponent } from './hero-list-twoway.component';
+import { HeroListAutoComponent } from './hero-list-auto.component';
+import { HeroListGroupsComponent } from './hero-list-groups.component';
+import { HeroListMultistepComponent } from './hero-list-multistep.component';
+import { HeroListTimingsComponent } from './hero-list-timings.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    HeroTeamBuilderComponent,
+    HeroListBasicComponent,
+    HeroListInlineStylesComponent,
+    HeroListCombinedTransitionsComponent,
+    HeroListTwowayComponent,
+    HeroListEnterLeaveComponent,
+    HeroListEnterLeaveStatesComponent,
+    HeroListAutoComponent,
+    HeroListTimingsComponent,
+    HeroListMultistepComponent,
+    HeroListGroupsComponent
+  ],
+  bootstrap: [ HeroTeamBuilderComponent ]
+})
+export class AppModule { }

public/docs/_examples/animations/ts/app/hero-team-builder.component.ts

@@ -1,16 +1,6 @@
 import { Component } from '@angular/core';
 
 import { Heroes } from './hero.service';
-import { HeroListBasicComponent } from './hero-list-basic.component';
-import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
-import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
-import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component';
-import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
-import { HeroListTwowayComponent } from './hero-list-twoway.component';
-import { HeroListAutoComponent } from './hero-list-auto.component';
-import { HeroListGroupsComponent } from './hero-list-groups.component';
-import { HeroListMultistepComponent } from './hero-list-multistep.component';
-import { HeroListTimingsComponent } from './hero-list-timings.component';
 
 @Component({
   selector: 'hero-team-builder',
@@ -97,18 +87,6 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
       min-height: 6em;
     }
   `],
-  directives: [
-    HeroListBasicComponent,
-    HeroListInlineStylesComponent,
-    HeroListCombinedTransitionsComponent,
-    HeroListTwowayComponent,
-    HeroListEnterLeaveComponent,
-    HeroListEnterLeaveStatesComponent,
-    HeroListAutoComponent,
-    HeroListTimingsComponent,
-    HeroListMultistepComponent,
-    HeroListGroupsComponent
-  ],
   providers: [Heroes]
 })
 export class HeroTeamBuilderComponent {

public/docs/_examples/animations/ts/app/main.ts

@@ -1,5 +1,4 @@
-import { bootstrap }      from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-import { HeroTeamBuilderComponent } from './hero-team-builder.component';
-
-bootstrap(HeroTeamBuilderComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/architecture/ts/app/app.component.ts

@@ -1,16 +1,13 @@
 // #docregion import
 import { Component } from '@angular/core';
 // #enddocregion import
-import { HeroListComponent } from './hero-list.component';
-import { SalesTaxComponent } from './sales-tax.component';
 
 @Component({
   selector: 'my-app',
   template: `
-  <hero-list></hero-list>
-  <sales-tax></sales-tax>
-  `,
-  directives: [HeroListComponent, SalesTaxComponent]
+    <hero-list></hero-list>
+    <sales-tax></sales-tax>
+  `
 })
 // #docregion export
 export class AppComponent { }

public/docs/_examples/architecture/ts/app/app.module.ts

@@ -0,0 +1,36 @@
+import { BrowserModule }       from '@angular/platform-browser';
+import { FormsModule }         from '@angular/forms';
+// #docregion imports
+import { NgModule }     from '@angular/core';
+import { AppComponent } from './app.component';
+// #enddocregion imports
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroListComponent }   from './hero-list.component';
+import { SalesTaxComponent }   from './sales-tax.component';
+import { HeroService }         from './hero.service';
+import { BackendService }      from './backend.service';
+import { Logger }              from './logger.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent,
+    HeroListComponent,
+    SalesTaxComponent
+  ],
+// #docregion providers
+  providers: [
+    BackendService,
+    HeroService,
+    Logger
+  ],
+// #enddocregion providers
+  bootstrap: [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export

public/docs/_examples/architecture/ts/app/hero-detail.component.ts

@@ -4,8 +4,7 @@ import { Hero } from './hero';
 
 @Component({
   selector: 'hero-detail',
-  templateUrl: 'app/hero-detail.component.html',
-  directives: [HeroDetailComponent]
+  templateUrl: 'app/hero-detail.component.html'
 })
 export class HeroDetailComponent {
   @Input() hero: Hero;

public/docs/_examples/architecture/ts/app/hero-list.component.ts

@@ -1,18 +1,15 @@
 import { Component, OnInit }   from '@angular/core';
 
 import { Hero }                from './hero';
-import { HeroDetailComponent } from './hero-detail.component';
 import { HeroService }         from './hero.service';
 
-// #docregion metadata
+// #docregion metadata, providers
 @Component({
   selector:    'hero-list',
   templateUrl: 'app/hero-list.component.html',
-  directives:  [HeroDetailComponent],
-  // #docregion providers
-  providers:   [HeroService]
-  // #enddocregion providers
+  providers:   [ HeroService ]
 })
+// #enddocregion providers
 // #docregion class
 export class HeroListComponent implements OnInit {
   // #enddocregion metadata

public/docs/_examples/architecture/ts/app/main.ts

@@ -1,11 +1,5 @@
-import { bootstrap }      from '@angular/platform-browser-dynamic';
-// #docregion import
-import { AppComponent } from './app.component';
-// #enddocregion import
-import { HeroService }    from './hero.service';
-import { BackendService } from './backend.service';
-import { Logger }         from './logger.service';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-// #docregion bootstrap
-bootstrap(AppComponent, [BackendService, HeroService, Logger]);
-// #enddocregion bootstrap
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/architecture/ts/app/mini-app.ts

@@ -0,0 +1,45 @@
+// #docplaster
+// A mini-application
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+  log(message: string) { console.log(message); }
+}
+
+// #docregion import-core-component
+import { Component } from '@angular/core';
+// #enddocregion import-core-component
+
+@Component({
+ selector: 'my-app',
+ template: 'Welcome to Angular 2'
+})
+export class AppComponent {
+  constructor(logger: Logger) {
+    logger.log('Let the fun begin!');
+  }
+}
+
+// #docregion module
+import { NgModule }      from '@angular/core';
+// #docregion import-browser-module
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion import-browser-module
+@NgModule({
+// #docregion ngmodule-imports
+  imports:      [ BrowserModule ],
+// #enddocregion ngmodule-imports
+  providers:    [ Logger ],
+  declarations: [ AppComponent ],
+  exports:      [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export
+// #enddocregion module
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/architecture/ts/app/sales-tax.component.ts

@@ -14,7 +14,7 @@ import { TaxRateService }  from './tax-rate.service';
      {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
     </div>
   `,
-  providers:   [SalesTaxService, TaxRateService]
+  providers: [SalesTaxService, TaxRateService]
 })
 export class SalesTaxComponent {
   constructor(private salesTaxService: SalesTaxService) { }

public/docs/_examples/architecture/ts/mini-app.html

@@ -1,9 +1,7 @@
 <!DOCTYPE html>
-<!-- #docregion -->
 <html>
   <head>
-    <base href="/">
-    <title>Router Sample v.3</title>
+    <title>Architecture of Angular 2</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
@@ -17,15 +15,12 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app/main.3') //  <-----  ONLY CHANGE
-            .catch(function(err){ console.error(err); });
+      System.import('app/mini-app').catch(function(err){ console.error(err); });
     </script>
   </head>
 
   <body>
-    <h1>Milestone 3</h1>
-    <my-app>loading...</my-app>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
-<!-- #enddocregion -->

public/docs/_examples/attribute-directives/ts/app/app.component.ts

@@ -1,14 +1,10 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { HighlightDirective } from './highlight.directive';
-
 @Component({
   selector: 'my-app',
-  templateUrl: 'app/app.component.html',
-  directives: [HighlightDirective]
+  templateUrl: 'app/app.component.html'
 })
 
 export class AppComponent { }
-
 // #enddocregion

public/docs/_examples/attribute-directives/ts/app/app.module.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { HighlightDirective } from './highlight.directive';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    HighlightDirective
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/attribute-directives/ts/app/main.ts

@@ -1,7 +1,5 @@
 // #docregion
-import { bootstrap }    from '@angular/platform-browser-dynamic';
-
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts

@@ -1,17 +1,12 @@
 import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
 
-import { MovieListComponent } from './movie-list.component';
 import { MovieService } from './movie.service';
 import { IMovie } from './movie';
-import { StringSafeDatePipe } from './date.pipe';
 
 @Component({
   selector: 'my-app',
   templateUrl: 'app/app.component.html',
   styleUrls: ['app/app.component.css'],
-  directives: [MovieListComponent, ROUTER_DIRECTIVES],
-  pipes: [StringSafeDatePipe],
   providers: [MovieService]
 })
 export class AppComponent {

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }  from './app.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts

@@ -0,0 +1,23 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+import { RouterModule }   from '@angular/router';
+
+import { AppComponent }  from './app.component';
+import { MovieListComponent } from './movie-list.component';
+import { routes } from './app.routes';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot(routes, {})
+  ],
+  declarations: [
+    AppComponent,
+    MovieListComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts

@@ -1,13 +1,9 @@
 // #docregion
-import { provideRouter, RouterConfig }  from '@angular/router';
+import { RouterConfig }  from '@angular/router';
 
 import { MovieListComponent } from './movie-list.component';
 
-const routes: RouterConfig = [
+export const routes: RouterConfig = [
   { path: '', redirectTo: '/movies', pathMatch: 'full' },
   { path: 'movies', component: MovieListComponent }
 ];
-
-export const appRouterProviders = [
-  provideRouter(routes)
-];

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts

@@ -1,5 +0,0 @@
-// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts

@@ -1,8 +1,5 @@
 // #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
-import { appRouterProviders } from './app.routes';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-bootstrap(AppComponent, [
-  appRouterProviders
-]);
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts

@@ -3,10 +3,8 @@
 // #docregion import
 import { Component } from '@angular/core';
 // #enddocregion import
-import { MovieService } from './movie.service';
 import { IMovie } from './movie';
-import { StringSafeDatePipe } from './date.pipe';
-
+import { MovieService } from './movie.service';
 
 // #docregion component
 @Component({
@@ -16,9 +14,6 @@ import { StringSafeDatePipe } from './date.pipe';
 // #docregion style-url
   styleUrls: ['app/movie-list.component.css'],
 // #enddocregion style-url
-// #docregion date-pipe
-  pipes: [StringSafeDatePipe]
-// #enddocregion date-pipe
 })
 // #enddocregion component
 // #docregion class

public/docs/_examples/cb-component-communication/ts/app/app.component.ts

@@ -1,32 +1,7 @@
 import { Component } from '@angular/core';
 
-import { HeroParentComponent } from './hero-parent.component';
-import { NameParentComponent } from './name-parent.component';
-import { VersionParentComponent } from './version-parent.component';
-import { VoteTakerComponent } from './votetaker.component';
-import { CountdownLocalVarParentComponent,
-        CountdownViewChildParentComponent } from './countdown-parent.component';
-import { MissionControlComponent } from './missioncontrol.component';
-
-let directives: any[] = [
-    HeroParentComponent,
-    NameParentComponent,
-    VersionParentComponent,
-    VoteTakerComponent,
-    MissionControlComponent,
-  ];
-
-// Include Countdown examples
-// unless in e2e tests which they break.
-if (!/e2e/.test(location.search)) {
-  console.log('adding countdown timer examples');
-  directives.push(CountdownLocalVarParentComponent);
-  directives.push(CountdownViewChildParentComponent);
-}
-
 @Component({
   selector: 'my-app',
-  templateUrl: 'app/app.component.html',
-  directives: directives
+  templateUrl: 'app/app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/cb-component-communication/ts/app/app.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { AstronautComponent } from './astronaut.component';
+import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component';
+import { CountdownTimerComponent } from './countdown-timer.component';
+import { HeroChildComponent } from './hero-child.component';
+import { HeroParentComponent } from './hero-parent.component';
+import { MissionControlComponent } from './missioncontrol.component';
+import { NameChildComponent } from './name-child.component';
+import { NameParentComponent } from './name-parent.component';
+import { VersionChildComponent } from './version-child.component';
+import { VersionParentComponent } from './version-parent.component';
+import { VoterComponent } from './voter.component';
+import { VoteTakerComponent } from './votetaker.component';
+
+let directives: any[] = [
+    AppComponent,
+    AstronautComponent,
+    CountdownTimerComponent,
+    HeroChildComponent,
+    HeroParentComponent,
+    MissionControlComponent,
+    NameChildComponent,
+    NameParentComponent,
+    VersionChildComponent,
+    VersionParentComponent,
+    VoterComponent,
+    VoteTakerComponent
+  ];
+
+// Include Countdown examples
+// unless in e2e tests which they break.
+if (!/e2e/.test(location.search)) {
+  console.log('adding countdown timer examples');
+  directives.push(CountdownLocalVarParentComponent);
+  directives.push(CountdownViewChildParentComponent);
+}
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: directives,
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts

@@ -19,7 +19,6 @@ import { CountdownTimerComponent }  from './countdown-timer.component';
   <div class="seconds">{{timer.seconds}}</div>
   <countdown-timer #timer></countdown-timer>
   `,
-  directives: [CountdownTimerComponent],
   styleUrls: ['demo.css']
 })
 export class CountdownLocalVarParentComponent { }
@@ -36,7 +35,6 @@ export class CountdownLocalVarParentComponent { }
   <div class="seconds">{{ seconds() }}</div>
   <countdown-timer></countdown-timer>
   `,
-  directives: [CountdownTimerComponent],
   styleUrls: ['demo.css']
 })
 export class CountdownViewChildParentComponent implements AfterViewInit {

public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { HeroChildComponent } from './hero-child.component';
 import { HEROES } from './hero';
 
 @Component({
@@ -12,8 +11,7 @@ import { HEROES } from './hero';
       [hero]="hero"
       [master]="master">
     </hero-child>
-  `,
-  directives: [HeroChildComponent]
+  `
 })
 export class HeroParentComponent {
   heroes = HEROES;

public/docs/_examples/cb-component-communication/ts/app/main.ts

@@ -1,5 +1,5 @@
-import { bootstrap }    from '@angular/platform-browser-dynamic';
+import { browserDynamicPlatform }    from '@angular/platform-browser-dynamic';
 
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
-bootstrap(AppComponent);
+browserDynamicPlatform().bootstrapModule(AppModule);

public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Component }          from '@angular/core';
 
-import { AstronautComponent } from './astronaut.component';
 import { MissionService }     from './mission.service';
 
 @Component({
@@ -17,7 +16,6 @@ import { MissionService }     from './mission.service';
       <li *ngFor="let event of history">{{event}}</li>
     </ul>
   `,
-  directives: [AstronautComponent],
   providers: [MissionService]
 })
 export class MissionControlComponent {

public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts

@@ -1,8 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { NameChildComponent } from './name-child.component';
-
 @Component({
   selector: 'name-parent',
   template: `
@@ -10,8 +8,7 @@ import { NameChildComponent } from './name-child.component';
     <name-child *ngFor="let name of names"
       [name]="name">
     </name-child>
-  `,
-  directives: [NameChildComponent]
+  `
 })
 export class NameParentComponent {
   // Displays 'Mr. IQ', '<no name set>', 'Bombasto'

public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts

@@ -1,8 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { VersionChildComponent } from './version-child.component';
-
 @Component({
   selector: 'version-parent',
   template: `
@@ -10,8 +8,7 @@ import { VersionChildComponent } from './version-child.component';
     <button (click)="newMinor()">New minor version</button>
     <button (click)="newMajor()">New major version</button>
     <version-child [major]="major" [minor]="minor"></version-child>
-  `,
-  directives: [VersionChildComponent]
+  `
 })
 export class VersionParentComponent {
   major: number = 1;

public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts

@@ -1,8 +1,6 @@
 // #docregion
 import { Component }      from '@angular/core';
 
-import { VoterComponent } from './voter.component';
-
 @Component({
   selector: 'vote-taker',
   template: `
@@ -12,8 +10,7 @@ import { VoterComponent } from './voter.component';
       [name]="voter"
       (onVoted)="onVoted($event)">
     </my-voter>
-  `,
-  directives: [VoterComponent]
+  `
 })
 export class VoteTakerComponent {
   agreed = 0;

public/docs/_examples/cb-component-relative-paths/ts/app/app.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/cb-component-relative-paths/ts/app/main.ts

@@ -1,5 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts

@@ -1,22 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { HeroBiosComponent,
-         HeroBiosAndContactsComponent } from './hero-bios.component';
-import { HeroOfTheMonthComponent }     from './hero-of-the-month.component';
-import { HeroesBaseComponent,
-         SortedHeroesComponent }       from './sorted-heroes.component';
-import { HighlightDirective }          from './highlight.directive';
-import { ParentFinderComponent }       from './parent-finder.component';
-
-const DIRECTIVES = [
-    HeroBiosComponent, HeroBiosAndContactsComponent,
-    HeroesBaseComponent, SortedHeroesComponent,
-    HeroOfTheMonthComponent,
-    HighlightDirective,
-    ParentFinderComponent
-];
-
 // #docregion import-services
 import { LoggerService }      from './logger.service';
 import { UserContextService } from './user-context.service';
@@ -25,7 +9,6 @@ import { UserService }        from './user.service';
 @Component({
   selector: 'my-app',
   templateUrl: 'app/app.component.html',
-  directives: DIRECTIVES,
 // #docregion providers
   providers: [LoggerService, UserContextService, UserService]
 // #enddocregion providers

public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts

@@ -0,0 +1,74 @@
+// #docregion
+import { BrowserModule }                from '@angular/platform-browser';
+import { FormsModule }                  from '@angular/forms';
+import { XHRBackend }                   from '@angular/http';
+// import { appRouterProviders }        from './app.routes';
+import { LocationStrategy,
+         HashLocationStrategy }         from '@angular/common';
+import { NgModule }                     from '@angular/core';
+
+import { HeroData }                     from './hero-data';
+import { InMemoryBackendService,
+         SEED_DATA }                    from 'angular2-in-memory-web-api';
+
+import { AppComponent }                 from './app.component';
+import { HeroBioComponent }             from './hero-bio.component';
+import { HeroBiosComponent,
+         HeroBiosAndContactsComponent } from './hero-bios.component';
+import { HeroOfTheMonthComponent }      from './hero-of-the-month.component';
+import { HeroContactComponent }         from './hero-contact.component';
+import { HeroesBaseComponent,
+         SortedHeroesComponent }        from './sorted-heroes.component';
+import { HighlightDirective }           from './highlight.directive';
+import { ParentFinderComponent,
+         AlexComponent,
+         AliceComponent,
+         CarolComponent,
+         ChrisComponent,
+         CraigComponent,
+         CathyComponent,
+         BarryComponent,
+         BethComponent,
+         BobComponent }                 from './parent-finder.component';
+
+const DIRECTIVES = [
+    HeroBiosComponent, HeroBiosAndContactsComponent, HeroBioComponent,
+    HeroesBaseComponent, SortedHeroesComponent,
+    HeroOfTheMonthComponent, HeroContactComponent,
+    HighlightDirective,
+    ParentFinderComponent,
+    AppComponent
+];
+
+const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
+
+// #docregion C_DIRECTIVES
+const C_DIRECTIVES = [
+  CarolComponent, ChrisComponent, CraigComponent,
+  CathyComponent
+];
+// #enddocregion C_DIRECTIVES
+
+// #docregion bootstrap
+@NgModule({
+  imports: [ BrowserModule, FormsModule ],
+  declarations: [ ...DIRECTIVES,
+                  ...B_DIRECTIVES,
+                  ...C_DIRECTIVES,
+                  AliceComponent,
+                  AlexComponent ],
+  bootstrap: [ AppComponent ],
+  providers: [
+    // appRouterProviders, TODO: add routes
+    { provide: LocationStrategy, useClass: HashLocationStrategy },
+
+    { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
+    { provide: SEED_DATA,  useClass: HeroData } // in-mem server data
+  ]
+})
+export class AppModule {
+  constructor() {
+  }
+}
+// #enddocregion bootstraps
+

public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts

@@ -2,8 +2,6 @@
 // #docregion
 import { Component }             from '@angular/core';
 
-import { HeroContactComponent } from './hero-contact.component';
-import { HeroBioComponent }     from './hero-bio.component';
 import { HeroService }          from './hero.service';
 import { LoggerService }        from './logger.service';
 
@@ -15,7 +13,6 @@ import { LoggerService }        from './logger.service';
     <hero-bio [heroId]="1"></hero-bio>
     <hero-bio [heroId]="2"></hero-bio>
     <hero-bio [heroId]="3"></hero-bio>`,
-  directives: [HeroBioComponent],
   providers: [HeroService]
 })
 export class HeroBiosComponent {
@@ -39,7 +36,6 @@ export class HeroBiosComponent {
     <hero-bio [heroId]="2"> <hero-contact></hero-contact> </hero-bio>
     <hero-bio [heroId]="3"> <hero-contact></hero-contact> </hero-bio>`,
   // #enddocregion template
-  directives: [HeroBioComponent, HeroContactComponent],
   // #docregion class-provider
   providers: [HeroService]
   // #enddocregion class-provider

public/docs/_examples/cb-dependency-injection/ts/app/main.ts

@@ -1,22 +1,5 @@
 // #docregion
-import { bootstrap }            from '@angular/platform-browser-dynamic';
-import { XHRBackend }           from '@angular/http';
-import { appRouterProviders }   from './app.routes';
-import { LocationStrategy,
-         HashLocationStrategy } from '@angular/common';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-import { HeroData }         from './hero-data';
-import { InMemoryBackendService,
-         SEED_DATA }        from 'angular2-in-memory-web-api';
-
-import { AppComponent }     from './app.component';
-
-// #docregion bootstrap
-bootstrap(AppComponent, [
-  appRouterProviders,
-  { provide: LocationStrategy, useClass: HashLocationStrategy },
-
-  { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
-  { provide: SEED_DATA,  useClass: HeroData } // in-mem server data
-]).catch((err: any) => console.error(err));
-// #enddocregion bootstrap
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts

@@ -85,13 +85,6 @@ export class CraigComponent {
 }
 // #enddocregion craig
 
-// #docregion C_DIRECTIVES
-const C_DIRECTIVES = [
-  CarolComponent, ChrisComponent, CraigComponent,
-  forwardRef(() => CathyComponent)
-];
-// #enddocregion C_DIRECTIVES
-
 //////// B - Parent /////////
 // #docregion barry
 const templateB = `
@@ -107,7 +100,6 @@ const templateB = `
 @Component({
   selector:   'barry',
   template:   templateB,
-  directives: C_DIRECTIVES,
   providers:  [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }]
 })
 export class BarryComponent implements Parent {
@@ -121,7 +113,6 @@ export class BarryComponent implements Parent {
 @Component({
   selector:   'bob',
   template:   templateB,
-  directives: C_DIRECTIVES,
   providers:  [ provideParent(BobComponent) ]
 })
 export class BobComponent implements Parent {
@@ -132,7 +123,6 @@ export class BobComponent implements Parent {
 @Component({
   selector:   'beth',
   template:   templateB,
-  directives: C_DIRECTIVES,
 // #docregion beth-providers
   providers:  [ provideParent(BethComponent, DifferentParent) ]
 // #enddocregion beth-providers
@@ -142,8 +132,6 @@ export class BethComponent implements Parent {
   constructor( @SkipSelf() @Optional() public parent: Parent ) { }
 }
 
-const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
-
 ///////// A - Grandparent //////
 
 // #docregion alex, alex-1
@@ -161,7 +149,6 @@ const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
   providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }],
 // #enddocregion alex-providers
 // #docregion alex-1
-  directives: C_DIRECTIVES
 })
 // #enddocregion alex-1
 // Todo: Add `... implements Parent` to class signature
@@ -187,7 +174,6 @@ export class AlexComponent extends Base
       <bob></bob>
       <carol></carol>
     </div> `,
-  directives: [ B_DIRECTIVES, C_DIRECTIVES ],
 // #docregion alice-providers
   providers:  [ provideParent(AliceComponent) ]
 // #enddocregion alice-providers
@@ -224,7 +210,6 @@ export class CathyComponent {
   template: `
     <h2>Parent Finder</h2>
     <alex></alex>
-    <alice></alice>`,
-  directives: [ AlexComponent, AliceComponent ]
+    <alice></alice>`
 })
 export class ParentFinderComponent { }

public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts

@@ -2,5 +2,4 @@ import { bootstrap }    from '@angular/platform-browser-dynamic';
 
 import { AppComponent } from './app.component';
 
-bootstrap(AppComponent, [])
-  .catch((err: any) => console.error(err));
+bootstrap(AppComponent, []);

public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Component }       from '@angular/core';
 
-import { DynamicFormComponent }     from './dynamic-form.component';
 import { QuestionService } from './question.service';
 
 @Component({
@@ -12,7 +11,6 @@ import { QuestionService } from './question.service';
       <dynamic-form [questions]="questions"></dynamic-form>
     </div>
   `,
-  directives: [DynamicFormComponent],
   providers:  [QuestionService]
 })
 export class AppComponent {

public/docs/_examples/cb-dynamic-form/ts/app/app.module.ts

@@ -0,0 +1,18 @@
+// #docregion
+import { BrowserModule }                from '@angular/platform-browser';
+import { ReactiveFormsModule }          from '@angular/forms';
+import { NgModule }                     from '@angular/core';
+
+import { AppComponent }                 from './app.component';
+import { DynamicFormComponent }         from './dynamic-form.component';
+import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
+
+@NgModule({
+  imports: [ BrowserModule, ReactiveFormsModule ],
+  declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+  constructor() {
+  }
+}

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts

@@ -1,13 +1,12 @@
 // #docregion
 import { Component, Input } from '@angular/core';
-import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 
 import { QuestionBase }     from './question-base';
 
 @Component({
   selector: 'df-question',
-  templateUrl: 'app/dynamic-form-question.component.html',
-  directives: [REACTIVE_FORM_DIRECTIVES]
+  templateUrl: 'app/dynamic-form-question.component.html'
 })
 export class DynamicFormQuestionComponent {
   @Input() question: QuestionBase<any>;

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts

@@ -1,16 +1,14 @@
 // #docregion
 import { Component, Input, OnInit }  from '@angular/core';
-import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { FormGroup }                 from '@angular/forms';
 
-import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
-import { QuestionBase }                 from './question-base';
-import { QuestionControlService }       from './question-control.service';
+import { QuestionBase }              from './question-base';
+import { QuestionControlService }    from './question-control.service';
 
 @Component({
   selector: 'dynamic-form',
   templateUrl: 'app/dynamic-form.component.html',
-  directives: [DynamicFormQuestionComponent, REACTIVE_FORM_DIRECTIVES],
-  providers:  [QuestionControlService]
+  providers: [ QuestionControlService ]
 })
 export class DynamicFormComponent implements OnInit {
 

public/docs/_examples/cb-dynamic-form/ts/app/main.ts

@@ -1,11 +1,5 @@
 // #docregion
-import { bootstrap }                            from '@angular/platform-browser-dynamic';
-import { disableDeprecatedForms, provideForms } from '@angular/forms';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent, [
-  disableDeprecatedForms(),
-  provideForms()
-])
-.catch((err: any) => console.error(err));
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-set-document-title/ts/app/app.module.ts

@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule, Title }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  providers: [
+    Title
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/cb-set-document-title/ts/app/main.ts

@@ -1,22 +1,6 @@
-/* tslint:disable */
 // #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
 
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
-// While Angular supplies a Title service for setting the HTML document title
-// it doesn't include this service as part of the default Browser platform providers.
-// As such, if we want to inject it into the components within our application,
-// we have to explicitly provide the Angular service in our top component.
-// #docregion bootstrap-title
-import { Title } from '@angular/platform-browser';
-
-bootstrap(AppComponent, [ Title ])
-// #enddocregion bootstrap-title
-  .then(
-    () => window.console.info( 'Angular finished bootstrapping your application!' ),
-    (error) => {
-      console.warn( 'Angular was not able to bootstrap your application.' );
-      console.error( error );
-    }
-  );
+browserDynamicPlatform().bootstrapModule(AppModule);

public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js

@@ -36,12 +36,22 @@
     selector: 'hero-di-inject-additional',
     template: '<hero-title title="Tour of Heroes">' +
       '<span #okMsg class="ok-msg"></span>' +
-    '</hero-title>',
-    directives: [TitleComponent]
+    '</hero-title>'
   }).Class({
     constructor: function() { }
   });
-
-  app.HeroDIInjectAdditionalComponent = AppComponent;
+ 
+  app.HeroesDIInjectAdditionalModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      declarations: [
+        AppComponent,
+        TitleComponent
+      ],
+      bootstrap: [ AppComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js

@@ -15,7 +15,16 @@
   ];
 // #enddocregion parameters
 
-  app.HeroDIInjectComponent = HeroComponent;
+  app.HeroesDIInjectModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
+      declarations: [ HeroComponent ],
+      bootstrap: [ HeroComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
   
 })(window.app = window.app || {});
 
@@ -34,6 +43,15 @@
   });
 // #enddocregion ctor
 
-  app.HeroDIInjectComponent2 = HeroComponent;
+  app.HeroesDIInjectModule2 =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      providers: [ { provide: 'heroName', useValue: 'Bombasto' } ],
+      declarations: [ HeroComponent ],
+      bootstrap: [ HeroComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js

@@ -12,5 +12,16 @@
        }]
   });
   // #enddocregion
-  app.HeroDIInlineComponent = HeroComponent;
+
+  app.HeroDIInlineModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      providers: [ app.DataService ],
+      declarations: [ HeroComponent ],
+      bootstrap: [ HeroComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
+
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js

@@ -17,4 +17,15 @@
   ];
   // #enddocregion
 
+  app.HeroesDIModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      providers: [ app.DataService ],
+      declarations: [ HeroComponent ],
+      bootstrap: [ HeroComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
+
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js

@@ -17,7 +17,15 @@
     });
   // #enddocregion component
 
-  app.HeroComponentDsl = HeroComponent;
+  app.HeroesDslModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      declarations: [ HeroComponent ],
+      bootstrap: [ HeroComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
 
 })(window.app = window.app || {});
 // #enddocregion appexport

public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js

@@ -42,8 +42,7 @@
         '(cancel)="onCancel()">' +
         '</my-confirm>' +
         '<span *ngIf="okClicked">OK clicked</span>' +
-        '<span *ngIf="cancelClicked">Cancel clicked</span>',
-      directives: [ConfirmComponent]
+        '<span *ngIf="cancelClicked">Cancel clicked</span>'
     })
   ];
   AppComponent.prototype.onOk = function() {
@@ -52,6 +51,18 @@
   AppComponent.prototype.onCancel = function() {
     this.cancelClicked = true;
   }
-  app.HeroIOComponent = AppComponent;
+
+  app.HeroesIOModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      declarations: [
+        AppComponent,
+        ConfirmComponent
+      ],
+      bootstrap: [ AppComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js

@@ -16,6 +16,14 @@
     };
   // #enddocregion
 
-  app.HeroLifecycleComponent = HeroComponent;
+  app.HeroesLifecycleModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      declarations: [ HeroComponent ],
+      bootstrap: [ HeroComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/hero.component.js

@@ -25,6 +25,16 @@
   // #enddocregion constructorproto
   // #enddocregion metadata
 
+  app.HeroesModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      declarations: [ HeroComponent ],
+      bootstrap: [ HeroComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
+
   // #docregion appexport
   app.HeroComponent = HeroComponent;
 

public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js

@@ -25,6 +25,15 @@
     }
   });
   // #enddocregion
-  app.HeroesHostBindingsComponent = HeroesComponent;
+
+  app.HeroesHostBindingsModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      declarations: [ HeroesComponent ],
+      bootstrap: [ HeroesComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js

@@ -7,7 +7,7 @@
       'Active' +
     '</span>'
   }).Class({
-    constructor: function() { },
+    constructor: [function() { }],
     activate: function() {
       this.active = true;
     }
@@ -26,12 +26,13 @@
                    ActiveLabelComponent)
     }
   }).Class({
-    constructor: function() { },
+    constructor: [function() { }],
     activate: function() {
       this.active = true;
       this.label.activate();
     }
   });
+  app.HeroQueriesComponent = HeroComponent;
   // #enddocregion content
 
   // #docregion view
@@ -44,11 +45,7 @@
       '</a-hero>' +
       '<button (click)="activate()">' +
         'Activate' +
-      '</button>',
-    directives: [
-      HeroComponent,
-      ActiveLabelComponent
-    ],
+      '</button>',    
     queries: {
       heroCmps: new ng.core.ViewChildren(
                       HeroComponent)
@@ -68,6 +65,18 @@
   });
   // #enddocregion view
 
-  app.HeroesQueriesComponent = AppComponent;
+  app.HeroesQueriesModule =
+    ng.core.NgModule({
+      imports: [ ng.platformBrowser.BrowserModule ],
+      declarations: [
+        AppComponent,
+        HeroComponent,
+        ActiveLabelComponent
+      ],
+      bootstrap: [ AppComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
 
 })(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/main.js

@@ -17,21 +17,20 @@
   // #enddocregion appimport
 
   document.addEventListener('DOMContentLoaded', function() {
-    bootstrap(HeroComponent);
-    bootstrap(app.HeroComponentDsl);
-    bootstrap(app.HeroLifecycleComponent);
-    bootstrap(app.HeroDIComponent, [app.DataService]);
-    bootstrap(app.HeroDIInlineComponent, [app.DataService]);
-    bootstrap(app.HeroDIInjectComponent, [
-      { provide: 'heroName', useValue: 'Windstorm' }
-    ]);
-    bootstrap(app.HeroDIInjectComponent2, [
-      { provide: 'heroName', useValue: 'Bombasto' }
-    ]);
-    bootstrap(app.HeroDIInjectAdditionalComponent);
-    bootstrap(app.HeroIOComponent);
-    bootstrap(app.HeroesHostBindingsComponent);
-    bootstrap(app.HeroesQueriesComponent);
+    var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic();
+
+    platformBrowserDynamic.bootstrapModule(app.HeroesModule);
+    platformBrowserDynamic.bootstrapModule(app.HeroesDslModule);
+    platformBrowserDynamic.bootstrapModule(app.HeroesLifecycleModule);
+    platformBrowserDynamic.bootstrapModule(app.HeroesDIModule);
+    platformBrowserDynamic.bootstrapModule(app.HeroDIInlineModule);
+    platformBrowserDynamic.bootstrapModule(app.HeroesDIInjectModule);
+    platformBrowserDynamic.bootstrapModule(app.HeroesDIInjectModule2);
+    platformBrowserDynamic.bootstrapModule(app.HeroesDIInjectAdditionalModule);
+    platformBrowserDynamic.bootstrapModule(app.HeroesIOModule);
+    platformBrowserDynamic.bootstrapModule(app.HeroesHostBindingsModule);
+
+    platformBrowserDynamic.bootstrapModule(app.HeroesQueriesModule);
   });
 
   // #docregion appimport

public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts

@@ -5,8 +5,10 @@ import {
   Inject,
   Optional,
   Query,
-  QueryList
+  QueryList,
+  NgModule
 } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 // #docregion
 @Component({
@@ -17,7 +19,7 @@ import {
     <ng-content></ng-content>
   `
 })
-export class TitleComponent {
+class TitleComponent {
   constructor(
     @Inject('titlePrefix')
     @Optional()
@@ -40,9 +42,16 @@ export class TitleComponent {
   selector: 'hero-di-inject-additional',
   template: `<hero-title title="Tour of Heroes">
     <span #okMsg class="ok-msg"></span>
-  </hero-title>`,
-  directives: [TitleComponent]
+  </hero-title>`
 })
-export class AppComponent {
+class AppComponent { }
 
-}
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    TitleComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class HeroesDIInjectAdditionalModule { }

public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts

@@ -1,14 +1,23 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 // #docregion
 @Component({
   selector: 'hero-di-inject',
   template: `<h1>Hero: {{name}}</h1>`
 })
-export class HeroComponent {
+class HeroComponent {
   constructor(
     @Inject('heroName')
       private name: string) {
   }
 }
 // #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesDIInjectModule { }

public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { DataService } from './data.service';
 
@@ -7,10 +8,18 @@ import { DataService } from './data.service';
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
 })
-export class HeroComponent {
+class HeroComponent {
   name: string;
   constructor(dataService: DataService) {
     this.name = dataService.getHeroName();
   }
 }
 // #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  providers: [ DataService ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesDIModule { }

public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 // #docregion
 @Component({
@@ -12,7 +19,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
     </button>
   `
 })
-export class ConfirmComponent {
+class ConfirmComponent {
   @Input() okMsg: string;
   @Input('cancelMsg') notOkMsg: string;
   @Output() ok =
@@ -40,10 +47,9 @@ export class ConfirmComponent {
     </my-confirm>
     <span *ngIf="okClicked">OK clicked</span>
     <span *ngIf="cancelClicked">Cancel clicked</span>
-  `,
-  directives: [ConfirmComponent]
+  `
 })
-export class AppComponent {
+class AppComponent {
   okClicked: boolean;
   cancelClicked: boolean;
 
@@ -54,3 +60,14 @@ export class AppComponent {
     this.cancelClicked = true;
   }
 }
+
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class HeroesIOModule { }

public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts

@@ -1,15 +1,16 @@
 // #docplaster
 // #docregion
-import { Component, OnInit }
-  from '@angular/core';
-  // #enddocregion
+import { Component, OnInit } from '@angular/core';
+// #enddocregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 @Component({
   selector: 'hero-lifecycle',
   template: `<h1>Hero: {{name}}</h1>`
 })
 // #docregion
-export class HeroComponent
+class HeroComponent
     implements OnInit {
   name: string;
   ngOnInit() {
@@ -17,3 +18,11 @@ export class HeroComponent
   }
 }
 // #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesLifecycleModule { }
+

public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts

@@ -16,3 +16,15 @@ export class HeroComponent {
 // #enddocregion class
 // #enddocregion appexport
 // #enddocregion metadata
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesModule { }
+
+

public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts

@@ -1,13 +1,19 @@
-import { Component, HostBinding, HostListener } from '@angular/core';
+import {
+  Component,
+  HostBinding,
+  HostListener,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 // #docregion
 @Component({
   selector: 'heroes-bindings',
   template: `<h1 [class.active]="active">
-    Tour ofHeroes
+    Tour of Heroes
   </h1>`
 })
-export class HeroesComponent {
+class HeroesComponent {
   @HostBinding() title = 'Tooltip content';
   @HostBinding('class.heading')
     hClass = true;
@@ -26,3 +32,10 @@ export class HeroesComponent {
   }
 }
 // #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroesComponent ],
+  bootstrap: [ HeroesComponent ]
+})
+export class HeroesHostBindingsModule { }

public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts

@@ -3,8 +3,10 @@ import {
   ViewChildren,
   ContentChild,
   QueryList,
-  Input
+  Input,
+  NgModule
 } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 @Component({
   selector: 'active-label',
@@ -55,13 +57,9 @@ class HeroComponent {
     <button (click)="activate()">
       Activate
     </button>
-  `,
-  directives: [
-    HeroComponent,
-    ActiveLabelComponent
-  ]
+  `
 })
-export class HeroesQueriesComponent {
+class HeroesQueriesComponent {
   heroData = [
     {id: 1, name: 'Windstorm'},
     {id: 2, name: 'Superman'}
@@ -77,3 +75,14 @@ export class HeroesQueriesComponent {
   }
 }
 // #enddocregion view
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    HeroesQueriesComponent,
+    HeroComponent,
+    ActiveLabelComponent
+  ],
+  bootstrap: [ HeroesQueriesComponent ]
+})
+export class HeroesQueriesModule { }

public/docs/_examples/cb-ts-to-js/ts/app/main.ts

@@ -9,26 +9,25 @@ import {
 // #enddocregion ng2import
 
 // #docregion appimport
-import { HeroComponent }
-  from './hero.component';
+import { HeroComponent } from './hero.component';
 // #enddocregion appimport
-import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
-import { HeroComponent as HeroDIComponent } from './hero-di.component';
-import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
-import { AppComponent as AppDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
-import { AppComponent as AppIOComponent } from './hero-io.component';
-import { HeroesComponent as HeroesHostBindingsComponent } from './heroes-bindings.component';
-import { HeroesQueriesComponent } from './heroes-queries.component';
 
-import { DataService } from './data.service';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-bootstrap(HeroComponent);
-bootstrap(HeroLifecycleComponent);
-bootstrap(HeroDIComponent, [DataService]);
-bootstrap(HeroDIInjectComponent, [
-  { provide: 'heroName', useValue: 'Windstorm' }
-]);
-bootstrap(AppDIInjectAdditionalComponent);
-bootstrap(AppIOComponent);
-bootstrap(HeroesHostBindingsComponent);
-bootstrap(HeroesQueriesComponent);
+import { HeroesModule } from './hero.component';
+import { HeroesLifecycleModule } from './hero-lifecycle.component';
+import { HeroesDIModule } from './hero-di.component';
+import { HeroesDIInjectModule } from './hero-di-inject.component';
+import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
+import { HeroesIOModule } from './hero-io.component';
+import { HeroesHostBindingsModule } from './heroes-bindings.component';
+import { HeroesQueriesModule } from './heroes-queries.component';
+
+platformBrowserDynamic().bootstrapModule(HeroesModule);
+platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
+platformBrowserDynamic().bootstrapModule(HeroesIOModule);
+platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
+platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);

public/docs/_examples/component-styles/ts/app/app.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HeroAppComponent } from './hero-app.component';
+import { HeroAppMainComponent } from './hero-app-main.component';
+import { HeroDetailsComponent } from './hero-details.component';
+import { HeroControlsComponent } from './hero-controls.component';
+import { QuestSummaryComponent } from './quest-summary.component';
+import { HeroTeamComponent } from './hero-team.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    HeroAppComponent,
+    HeroAppMainComponent,
+    HeroDetailsComponent,
+    HeroControlsComponent,
+    QuestSummaryComponent,
+    HeroTeamComponent
+  ],
+  bootstrap: [ HeroAppComponent ]
+})
+export class AppModule { }

public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts

@@ -1,9 +1,6 @@
 import { Component, Input } from '@angular/core';
 
 import { Hero } from './hero';
-import { HeroDetailsComponent } from './hero-details.component';
-import { HeroControlsComponent } from './hero-controls.component';
-import { QuestSummaryComponent } from './quest-summary.component';
 
 @Component({
   selector: 'hero-app-main',
@@ -12,8 +9,7 @@ import { QuestSummaryComponent } from './quest-summary.component';
     <hero-details [hero]=hero [class.active]=hero.active>
       <hero-controls [hero]=hero></hero-controls>
     </hero-details>
-  `,
-  directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]
+  `
 })
 export class HeroAppMainComponent {
   @Input() hero: Hero;

public/docs/_examples/component-styles/ts/app/hero-app.component.ts

@@ -1,6 +1,5 @@
 import { Component, HostBinding } from '@angular/core';
 import { Hero } from './hero';
-import { HeroAppMainComponent } from './hero-app-main.component';
 
 // #docregion
 @Component({
@@ -8,8 +7,7 @@ import { HeroAppMainComponent } from './hero-app-main.component';
   template: `
     <h1>Tour of Heroes</h1>
     <hero-app-main [hero]=hero></hero-app-main>`,
-  styles: ['h1 { font-weight: normal; }'],
-  directives: [HeroAppMainComponent]
+  styles: ['h1 { font-weight: normal; }']
 })
 export class HeroAppComponent {
 // #enddocregion

public/docs/_examples/component-styles/ts/app/hero-details.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
-import { HeroTeamComponent } from './hero-team.component';
 
 // #docregion styleurls
 @Component({
@@ -10,8 +9,7 @@ import { HeroTeamComponent } from './hero-team.component';
     <hero-team [hero]=hero></hero-team>
     <ng-content></ng-content>
   `,
-  styleUrls: ['app/hero-details.component.css'],
-  directives: [HeroTeamComponent]
+  styleUrls: ['app/hero-details.component.css']
 })
 export class HeroDetailsComponent {
   // #enddocregion styleurls

public/docs/_examples/component-styles/ts/app/main.ts

@@ -1,4 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { HeroAppComponent } from './hero-app.component';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-bootstrap(HeroAppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/dependency-injection/ts/app/app.component.1.ts

@@ -3,17 +3,13 @@
 // #docregion
 import { Component }         from '@angular/core';
 
-import { CarComponent }      from './car/car.component';
-import { HeroesComponent }   from './heroes/heroes.component.1';
-
 @Component({
   selector: 'my-app',
   template: `
     <h1>{{title}}</h1>
     <my-car></my-car>
     <my-heroes></my-heroes>
-  `,
-  directives: [CarComponent, HeroesComponent]
+  `
 })
 
 export class AppComponent {

public/docs/_examples/dependency-injection/ts/app/app.component.2.ts

@@ -1,13 +1,9 @@
 // #docregion
 // #docregion imports
 import { Component }         from '@angular/core';
-import { CarComponent }      from './car/car.component';
-import { HeroesComponent }   from './heroes/heroes.component.1';
-
 import { Inject }   from '@angular/core';
-import { APP_CONFIG, AppConfig,
-         HERO_DI_CONFIG }    from './app.config';
-import { Logger }            from './logger.service';
+
+import { APP_CONFIG, AppConfig }    from './app.config';
 // #enddocregion imports
 
 @Component({
@@ -16,14 +12,7 @@ import { Logger }            from './logger.service';
     <h1>{{title}}</h1>
     <my-car></my-car>
     <my-heroes></my-heroes>
-  `,
-  directives: [CarComponent, HeroesComponent],
-  providers: [
-    Logger,
-   // #docregion providers
-    { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
-   // #enddocregion providers
-  ]
+  `
 })
 export class AppComponent {
   title: string;

public/docs/_examples/dependency-injection/ts/app/app.component.ts

@@ -3,18 +3,10 @@
 // #docregion imports
 import { Component, Inject } from '@angular/core';
 
-import { CarComponent }      from './car/car.component';
-import { HeroesComponent }   from './heroes/heroes.component';
-
-import { APP_CONFIG, AppConfig,
-         HERO_DI_CONFIG }    from './app.config';
-import { Logger }            from './logger.service';
-
+import { APP_CONFIG, AppConfig }    from './app.config';
+import { Logger } from './logger.service';
 import { UserService } from './user.service';
 // #enddocregion imports
-import { InjectorComponent } from './injector.component';
-import { TestComponent }     from './test.component';
-import { ProvidersComponent } from './providers.component';
 
 @Component({
   selector: 'my-app',
@@ -31,15 +23,7 @@ import { ProvidersComponent } from './providers.component';
     <my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
     <my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
   `,
-  directives: [CarComponent, HeroesComponent,
-              InjectorComponent, TestComponent, ProvidersComponent],
-  // #docregion providers
-  providers: [
-    Logger,
-    UserService,
-    { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
-  ]
-  // #enddocregion providers
+  providers: [Logger]
 })
 export class AppComponent {
   title: string;

public/docs/_examples/dependency-injection/ts/app/app.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { CarComponent } from './car/car.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroListComponent } from './heroes/hero-list.component';
+import { InjectorComponent } from './injector.component';
+import { TestComponent } from './test.component';
+import { ProvidersComponent } from './providers.component';
+import { APP_CONFIG, HERO_DI_CONFIG }    from './app.config';
+import { UserService } from './user.service';
+
+// #docregion ngmodule
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    CarComponent,
+    HeroesComponent,
+    HeroListComponent,
+    InjectorComponent,
+    TestComponent
+  ],
+  // #docregion ngmodule-providers
+  providers: [
+    UserService,
+    { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
+  ],
+  // #enddocregion ngmodule-providers
+  bootstrap: [ AppComponent, ProvidersComponent ]
+})
+export class AppModule { }
+// #enddocregion ngmodule

public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts

@@ -18,7 +18,7 @@ import { HeroService } from './hero.service';
   <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}
   </div>
-  `,
+  `
 })
 export class HeroListComponent {
   heroes: Hero[];

public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts

@@ -1,28 +1,21 @@
 // #docplaster
 // #docregion full, v1
 import { Component }          from '@angular/core';
-
-// #enddocregion full, v1
-import { HeroListComponent }  from './hero-list.component.2';
-import { HeroService }        from './hero.service.1';
-/*
-// #docregion full, v1
-import { HeroListComponent }  from './hero-list.component';
 // #enddocregion v1
+
 import { HeroService }        from './hero.service';
 // #enddocregion full
-*/
+
 // #docregion full, v1
 
 @Component({
   selector: 'my-heroes',
+    // #enddocregion v1
+  providers: [HeroService],
+  // #docregion v1
   template: `
   <h2>Heroes</h2>
   <hero-list></hero-list>
-  `,
-  // #enddocregion v1
-  providers: [HeroService],
-  // #docregion v1
-  directives: [HeroListComponent]
+  `
 })
 export class HeroesComponent { }

public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts

@@ -1,7 +1,6 @@
 // #docregion
 import { Component }          from '@angular/core';
 
-import { HeroListComponent }  from './hero-list.component';
 import { heroServiceProvider } from './hero.service.provider';
 
 @Component({
@@ -10,7 +9,6 @@ import { heroServiceProvider } from './hero.service.provider';
   <h2>Heroes</h2>
   <hero-list></hero-list>
   `,
-  providers: [heroServiceProvider],
-  directives: [HeroListComponent]
+  providers: [heroServiceProvider]
 })
 export class HeroesComponent { }

public/docs/_examples/dependency-injection/ts/app/main.1.ts

@@ -1,13 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { bootstrap }    from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component.1';
-import { HeroService }  from './heroes/hero.service.1';
-
-bootstrap(AppComponent);
-
-function discouraged() {
-  // #docregion bootstrap-discouraged
-  bootstrap(AppComponent,
-           [HeroService]); // DISCOURAGED (but works)
-  // #enddocregion bootstrap-discouraged
-}

public/docs/_examples/dependency-injection/ts/app/main.ts

@@ -1,8 +1,6 @@
-import { bootstrap }          from '@angular/platform-browser-dynamic';
-import { AppComponent }       from './app.component';
-import { ProvidersComponent } from './providers.component';
+import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
+import { AppModule }           from './app.module';
 
 // #docregion bootstrap
-bootstrap(AppComponent);
+browserDynamicPlatform().bootstrapModule(AppModule);
 // #enddocregion bootstrap
-bootstrap(ProvidersComponent);

public/docs/_examples/displaying-data/ts/app/app.component.3.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
+
 // #docregion import
 import { Hero } from './hero';
 // #enddocregion import

public/docs/_examples/displaying-data/ts/app/app.component.ts

@@ -1,6 +1,7 @@
 // #docplaster
 // #docregion final
 import { Component } from '@angular/core';
+
 import { Hero } from './hero';
 
 @Component({

public/docs/_examples/displaying-data/ts/app/app.module.ts

@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/displaying-data/ts/app/main.ts

@@ -1,6 +1,6 @@
 // #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/forms/js/app/app.component.js

@@ -3,8 +3,7 @@
   app.AppComponent = ng.core
     .Component({
       selector: 'my-app',
-      template: '<hero-form></hero-form>',
-      directives: [app.HeroFormComponent]
+      template: '<hero-form></hero-form>'
     })
     .Class({
       constructor: function() {}

public/docs/_examples/forms/js/app/app.module.js

@@ -0,0 +1,19 @@
+// #docplaster
+// #docregion
+(function(app) {
+  app.AppModule =
+    ng.core.NgModule({
+      imports: [
+        ng.platformBrowser.BrowserModule,
+        ng.forms.FormsModule
+      ],
+      declarations: [
+        app.AppComponent,
+        app.HeroFormComponent
+      ],
+      bootstrap: [ app.AppComponent ]
+    })
+    .Class({
+      constructor: function() {}
+    });
+})(window.app || (window.app = {}));

public/docs/_examples/forms/js/app/hero-form.component.js

@@ -9,7 +9,7 @@
     })
     .Class({
       // #docregion submitted
-      constructor: function() {
+      constructor: [function() {
         // #enddocregion submitted
         this.powers = ['Really Smart', 'Super Flexible',
           'Super Hot', 'Weather Changer'
@@ -20,7 +20,7 @@
 
         // #docregion submitted
         this.submitted = false;
-      },
+      }],
       onSubmit: function() {
         this.submitted = true;
       },

public/docs/_examples/forms/js/app/main.js

@@ -1,9 +1,8 @@
 // #docregion
 (function(app) {
   document.addEventListener('DOMContentLoaded', function() {
-    ng.platformBrowserDynamic.bootstrap(app.AppComponent,[
-      ng.forms.disableDeprecatedForms(),
-      ng.forms.provideForms()  
-    ]);
+    ng.platformBrowserDynamic
+      .platformBrowserDynamic()
+      .bootstrapModule(app.AppModule);
   });
 })(window.app || (window.app = {}));

public/docs/_examples/forms/js/index.html

@@ -35,6 +35,7 @@
     <!-- #enddocregion scripts-hero-form -->
     <!-- #docregion scripts, scripts-hero, scripts-hero-form -->
     <script src='app/app.component.js'></script>
+    <script src='app/app.module.js'></script>
     <script src='app/main.js'></script>
     <!-- #enddocregion scripts, scripts-hero, scripts-hero-form -->
   </head>

public/docs/_examples/forms/ts/app/app.component.ts

@@ -1,10 +1,8 @@
 // #docregion
-import { Component }         from '@angular/core';
-import { HeroFormComponent } from './hero-form.component';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
-  template: '<hero-form></hero-form>',
-  directives: [HeroFormComponent]
+  template: '<hero-form></hero-form>'
 })
 export class AppComponent { }

public/docs/_examples/forms/ts/app/app.module.ts

@@ -0,0 +1,20 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+
+import { AppComponent }  from './app.component';
+import { HeroFormComponent } from './hero-form.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroFormComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/forms/ts/app/hero-form.component.html

@@ -11,11 +11,13 @@
       <div class="form-group">
         <!-- #docregion name-with-error-msg -->
         <label for="name">Name</label>
-        <input type="text" class="form-control" required
-          [(ngModel)]="model.name"
-            name="name"  #name="ngModel" >
+        <input type="text" class="form-control" id="name"
+               required
+               [(ngModel)]="model.name" name="name"
+               #name="ngModel" >
         <!-- #docregion hidden-error-msg -->
-        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
+        <div [hidden]="name.valid || name.pristine" 
+             class="alert alert-danger">
         <!-- #enddocregion hidden-error-msg -->
           Name is required
         </div>
@@ -24,16 +26,16 @@
 
       <div class="form-group">
         <label for="alterEgo">Alter Ego</label>
-        <input type="text" class="form-control"
-          [(ngModel)]="model.alterEgo"
-            name="alterEgo" >
+        <input type="text" class="form-control" id="alterEgo"
+               [(ngModel)]="model.alterEgo" name="alterEgo" >
       </div>
 
       <div class="form-group">
         <label for="power">Hero Power</label>
-        <select class="form-control" required
-          [(ngModel)]="model.power"
-            name="power" #power="ngModel" >
+        <select class="form-control" id="power"
+                required
+                [(ngModel)]="model.power" name="power" 
+                #power="ngModel" >
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
         <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
@@ -111,19 +113,19 @@
       <form>
         <div class="form-group">
           <label for="name">Name</label>
-          <input type="text" class="form-control" required>
+          <input type="text" class="form-control" id="name" required>
         </div>
 
         <div class="form-group">
           <label for="alterEgo">Alter Ego</label>
-          <input type="text" class="form-control">
+          <input type="text" class="form-control" id="alterEgo">
         </div>
 
     <!-- #enddocregion start -->
         <!-- #docregion powers -->
         <div class="form-group">
           <label for="power">Hero Power</label>
-          <select class="form-control" required>
+          <select class="form-control" id="power" required>
             <option *ngFor="let p of powers" [value]="p">{{p}}</option>
           </select>
         </div>
@@ -147,20 +149,22 @@
         {{diagnostic}}
         <div class="form-group">
           <label for="name">Name</label>
-          <input type="text" class="form-control" required
-            [(ngModel)]="model.name" name="name">
+          <input type="text" class="form-control" id="name"
+                 required
+                 [(ngModel)]="model.name" name="name">
         </div>
 
         <div class="form-group">
           <label for="alterEgo">Alter Ego</label>
-          <input type="text"  class="form-control"
-            [(ngModel)]="model.alterEgo" name="alterEgo">
+          <input type="text"  class="form-control" id="alterEgo"
+                 [(ngModel)]="model.alterEgo" name="alterEgo">
         </div>
 
         <div class="form-group">
           <label for="power">Hero Power</label>
-          <select class="form-control"  required
-            [(ngModel)]="model.power" name="power">
+          <select class="form-control"  id="power"
+                  required
+                  [(ngModel)]="model.power" name="power">
             <option *ngFor="let p of powers" [value]="p">{{p}}</option>
           </select>
         </div>
@@ -175,15 +179,17 @@
   <!-- EXTRA MATERIAL FOR DOCUMENTATION -->
   <hr>
   <!-- #docregion ngModel-1-->
-    <input type="text"  class="form-control" required
-      [(ngModel)]="model.name" name="name">
+    <input type="text"  class="form-control" id="name"
+           required
+           [(ngModel)]="model.name" name="name">
       TODO: remove this: {{model.name}}
   <!-- #enddocregion ngModel-1-->
   <hr>
   <!-- #docregion ngModel-3-->
-    <input type="text" class="form-control" required
-      [ngModel]="model.name"
-      (ngModelChange)="model.name = $event" >
+    <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-->
   <hr>
@@ -192,15 +198,16 @@
   <!-- #enddocregion form-active -->
 
   <!-- #docregion ngModelName-1 -->
-       <input type="text" class="form-control" required
-         [(ngModel)]="model.name"
-         name="name" >
+       <input type="text" class="form-control" id="name"
+              required
+              [(ngModel)]="model.name" name="name" >
   <!-- #enddocregion ngModelName-1 -->
   <hr>
   <!-- #docregion ngModelName-2 -->
-       <input type="text" class="form-control" required
-         [(ngModel)]="model.name"
-         name="name"  #spy >
+       <input type="text" class="form-control" id="name"
+         required
+         [(ngModel)]="model.name" name="name"
+         #spy >
        <br>TODO: remove this: {{spy.className}}
   <!-- #enddocregion ngModelName-2 -->
   </form>

public/docs/_examples/forms/ts/app/hero-form.component.ts

@@ -2,7 +2,6 @@
 // #docregion
 // #docregion first, final
 import { Component } from '@angular/core';
-import { NgForm }    from '@angular/forms';
 
 import { Hero }    from './hero';
 
@@ -51,7 +50,7 @@ export class HeroFormComponent {
 
   // Reveal in html:
   //   Name via form.controls = {{showFormControls(heroForm)}}
-  showFormControls(form: NgForm) {
+  showFormControls(form: any) {
 
     return form && form.controls['name'] &&
     // #docregion form-controls

public/docs/_examples/forms/ts/app/main.ts

@@ -1,11 +1,8 @@
 // #docregion
-import { bootstrap }    from '@angular/platform-browser-dynamic';
-import { disableDeprecatedForms, provideForms } from '@angular/forms';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
 
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent, [
-  disableDeprecatedForms(),
-  provideForms()
- ])
- .catch((err: any) => console.error(err));
+// Compiles the module (asynchronously) with the runtime compiler
+// which generates a compiled module factory in memory.
+// Then bootstraps with that factory, targeting the browser.
+platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/forms/ts/index.html

@@ -7,7 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
      <!-- #docregion bootstrap -->
-    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" 
+          href="node_modules/bootstrap/dist/css/bootstrap.min.css">
      <!-- #enddocregion bootstrap -->
      <!-- #docregion styles -->
     <link rel="stylesheet" href="styles.css">

public/docs/_examples/hierarchical-dependency-injection/ts/app/app.module.ts

@@ -0,0 +1,43 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { HeroesListComponent } from './heroes-list.component';
+import { HeroEditorComponent } from './hero-editor.component';
+import { HeroCardComponent } from './hero-card.component';
+import { HeroesService } from './heroes.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [ HeroesService ],
+  declarations: [
+    HeroesListComponent,
+    HeroCardComponent,
+    HeroEditorComponent
+  ],
+  bootstrap: [ HeroesListComponent ]
+})
+export class AppModule { }
+
+/* Documentation artifact below
+// #docregion bad-alternative
+// Don't do this!
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [ HeroesService, RestoreService ],
+  declarations: [ HeroesListComponent ],
+  bootstrap: [
+    HeroesListComponent,
+    HeroCardComponent,
+    HeroEditorComponent
+  ]
+})
+// #enddocregion bad-alternative
+*/