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

The HeroDetailComponent should be in the module declarations from the beginning.

Author: brandonroberts

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

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

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

@@ -8,11 +8,9 @@ import { AppComponent }   from './app.component';
 // #docregion routing
 import { routing }        from './app.routing';
 // #enddocregion routing
-
+import { HeroDetailComponent }  from './hero-detail.component';
 import { HeroesComponent }      from './heroes.component';
 import { DashboardComponent }   from './dashboard.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-
 import { HeroService }  from './hero.service';
 // #docregion routing
 
@@ -26,11 +24,9 @@ import { HeroService }  from './hero.service';
   // #docregion dashboard, hero-detail
   declarations: [
     AppComponent,
+    HeroDetailComponent,
     HeroesComponent,
-    DashboardComponent,
-    // #enddocregion dashboard
-    HeroDetailComponent
-    // #docregion dashboard
+    DashboardComponent
   ],
   // #enddocregion dashboard, hero-detail
   providers: [

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

@@ -16,9 +16,9 @@ import { InMemoryDataService }               from './in-memory-data.service';
 import { AppComponent }   from './app.component';
 import { routing }        from './app.routing';
 
+import { HeroDetailComponent }  from './hero-detail.component';
 import { HeroesComponent }      from './heroes.component';
 import { DashboardComponent }   from './dashboard.component';
-import { HeroDetailComponent }  from './hero-detail.component';
 import { HeroService }          from './hero.service';
 // #enddocregion v1, v2
 // #docregion search
@@ -36,9 +36,9 @@ import { HeroSearchComponent }  from './hero-search.component';
   // #docregion search
   declarations: [
     AppComponent,
+    HeroDetailComponent,
     HeroesComponent,
     DashboardComponent,
-    HeroDetailComponent,
     // #enddocregion v1, v2
     HeroSearchComponent
     // #docregion v1, v2

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.