fix(toh-5): Fixed issues in tutorial flow

The HeroDetailComponent should be in the module declarations from the beginning.
InMemoryWebApiModule.forRoot(InMemoryDataService) and correct text

public/docs/_examples/package.json

@@ -35,7 +35,7 @@
     "@angular/router": "3.0.0-rc.1",
     "@angular/router-deprecated": "2.0.0-rc.2",
     "@angular/upgrade": "2.0.0-rc.5",
-    "angular2-in-memory-web-api": "0.0.15",
+    "angular2-in-memory-web-api": "0.0.17",
     "bootstrap": "^3.3.6",
     "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",

public/docs/_examples/toh-5/ts/app/app.module.1.ts

@@ -3,11 +3,10 @@ import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }   from './app.component';
-
-import { HeroesComponent }  from './heroes.component';
-
-import { HeroService }  from './hero.service';
+import { AppComponent }        from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesComponent }     from './heroes.component';
+import { HeroService }         from './hero.service';
 
 @NgModule({
   imports: [
@@ -16,6 +15,7 @@ import { HeroService }  from './hero.service';
   ],
   declarations: [
     AppComponent,
+    HeroDetailComponent,
     HeroesComponent
   ],
   providers: [

public/docs/_examples/toh-5/ts/app/app.module.ts

@@ -4,16 +4,13 @@ import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }   from './app.component';
-// #docregion routing
-import { routing }        from './app.routing';
-// #enddocregion routing
-
-import { HeroesComponent }      from './heroes.component';
+import { AppComponent }         from './app.component';
 import { DashboardComponent }   from './dashboard.component';
 import { HeroDetailComponent }  from './hero-detail.component';
-
-import { HeroService }  from './hero.service';
+import { HeroesComponent }      from './heroes.component';
+import { HeroService }          from './hero.service';
+// #docregion routing
+import { routing } from './app.routing';
 // #docregion routing
 
 @NgModule({
@@ -26,11 +23,9 @@ import { HeroService }  from './hero.service';
   // #docregion dashboard, hero-detail
   declarations: [
     AppComponent,
-    HeroesComponent,
     DashboardComponent,
-    // #enddocregion dashboard
-    HeroDetailComponent
-    // #docregion dashboard
+    HeroDetailComponent,
+    HeroesComponent
   ],
   // #enddocregion dashboard, hero-detail
   providers: [

public/docs/_examples/toh-6/ts/app/app.module.ts

@@ -1,55 +1,51 @@
 // #docplaster
 // #docregion , v1, v2
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-import { HttpModule }     from '@angular/http';
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }   from '@angular/forms';
+import { HttpModule }    from '@angular/http';
 
 // #enddocregion v1
 // Imports for loading & configuring the in-memory web api
-import { XHRBackend } from '@angular/http';
-
-import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
-import { InMemoryDataService }               from './in-memory-data.service';
+import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
+import { InMemoryDataService }  from './in-memory-data.service';
 
 // #docregion v1
-import { AppComponent }   from './app.component';
-import { routing }        from './app.routing';
-
-import { HeroesComponent }      from './heroes.component';
+import { AppComponent }         from './app.component';
 import { DashboardComponent }   from './dashboard.component';
+import { HeroesComponent }      from './heroes.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 import { HeroService }          from './hero.service';
 // #enddocregion v1, v2
-// #docregion search
 import { HeroSearchComponent }  from './hero-search.component';
 // #docregion v1, v2
+import { routing }              from './app.routing';
 
-// #enddocregion search
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing,
-    HttpModule
+    HttpModule,
+    // #enddocregion v1
+    // #docregion in-mem-web-api
+    InMemoryWebApiModule.forRoot(InMemoryDataService),
+    // #enddocregion in-mem-web-api
+    // #docregion v1
+    routing
   ],
   // #docregion search
   declarations: [
     AppComponent,
-    HeroesComponent,
     DashboardComponent,
     HeroDetailComponent,
-    // #enddocregion v1, v2
+    HeroesComponent,
+  // #enddocregion v1, v2
     HeroSearchComponent
-    // #docregion v1, v2
+  // #docregion v1, v2
   ],
   // #enddocregion search
   providers: [
     HeroService,
-    // #enddocregion v1
-    { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
-    { provide: SEED_DATA,  useClass: InMemoryDataService }     // in-mem server data
-    // #docregion v1
   ],
   bootstrap: [ AppComponent ]
 })

public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts

@@ -1,5 +1,6 @@
 // #docregion , init
-export class InMemoryDataService {
+import { InMemoryDbService } from 'angular2-in-memory-web-api';
+export class InMemoryDataService implements InMemoryDbService {
   createDb() {
     let heroes = [
       {id: 11, name: 'Mr. Nice'},

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -479,15 +479,10 @@ code-example(format='').
   The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
   when navigating to the `HeroDetailComponent`.
 
-.l-sub-section
-  :marked
-    Remember to import the hero detail component before creating this route.
-
-+ifDocsFor('ts|js')
-  :marked
-    Add the `HeroDetailComponent` to our root NgModule's `declarations`.
-
-  +makeExcerpt('app/app.module.ts', 'hero-detail')
++ifDocsFor('dart')
+  .l-sub-section
+    :marked
+      Remember to import the hero detail component before creating this route.
 
 :marked
   We're finished with the application routes.

public/docs/ts/latest/tutorial/toh-pt6.jade

@@ -59,7 +59,7 @@ block http-providers
     So we register them in the `imports` array of `app.module.ts` where we
     bootstrap the application and its root `AppComponent`.
 
-  +makeExcerpt('app/app.module.ts (v1)')
+  +makeExample('app/app.module.ts', 'v1','app/app.module.ts (v1)')
 
   :marked
     Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`.
@@ -88,10 +88,16 @@ block http-providers
 
 block backend
   :marked
-    We're replacing the default `XHRBackend`, the service that talks to the remote server,
-    with the in-memory web API service after priming it as follows:
+    We're importing the  `InMemoryWebApiModule` and adding it to the module `imports`.
+    The  `InMemoryWebApiModule` replaces the default `Http` client backend —
+    the supporting service that talks to the remote server —
+    with an  _in-memory web API alternative service_.
+  +makeExcerpt(_appModuleTsVsMainTs, 'in-mem-web-api', '')
+  :marked
+    The `forRoot` configuration method takes an `InMemoryDataService` class 
+    that will prime the in-memory database as follows:
 
-+makeExample('app/in-memory-data.service.ts', 'init')
++makeExample('app/in-memory-data.service.ts', 'init')(format='.')
 
 p This file replaces the #[code #[+adjExPath('mock-heroes.ts')]] which is now safe to delete.
 
@@ -500,24 +506,25 @@ block observable-transformers
     We take a different approach in this example.
     We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file.
 
-  +makeExample('app/rxjs-extensions.ts')
+  +makeExample('app/rxjs-extensions.ts')(format='.')
 
   :marked
     We load them all at once by importing `rxjs-extensions` in `AppComponent`.
 
-  +makeExcerpt('app/app.component.ts', 'rxjs-extensions')
+  +makeExcerpt('app/app.component.ts', 'rxjs-extensions')(format='.')
 
 :marked
   ### Add the search component to the dashboard
 
   We add the hero search HTML element to the bottom of the `DashboardComponent` template.
 
-+makeExample('app/dashboard.component.html')
++makeExample('app/dashboard.component.html')(format='.')
 
 - var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations'
 - var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts'
 :marked
-  And finally, we import the `HeroSearchComponent` and add it to the `!{_declarations}` !{_array}:
+  And finally, we import the `HeroSearchComponent` from `'./hero-search.component.ts'` 
+  and add it to the `!{_declarations}` !{_array}:
 
 +makeExcerpt(declFile, 'search')