docs(toh-6): post-RC5 Dart resync and TS fixes (#2095)

* toh-6: trim spaces from cache file to simplify diff

* toh-6: copy latest over cache before editing latest

* docs(toh-6): post-RC5 Dart resync and TS fixes

Contributes to #2077.

TS-side changes include:
- Merged three versions of `app/app.module{,1,2}.ts` into a single file
and used docregions instead.
- Misnamed files:
  - `rxjs-operators.ts` -> `rxjs-extensions.ts`
  - `hero-search.service.html` -> `hero-search.component.html`
- Fixed BAD FILENAME error.

Lint reports no errors and toh-6 e2e tests pass.

public/docs/_examples/toh-6/dart/lib/dashboard_component.dart

@@ -1,4 +1,4 @@
-// #docregion , search
+// #docregion
 import 'dart:async';
 
 import 'package:angular2/core.dart';
@@ -6,6 +6,7 @@ import 'package:angular2/router.dart';
 
 import 'hero.dart';
 import 'hero_service.dart';
+// #docregion search
 import 'hero_search_component.dart';
 
 @Component(

public/docs/_examples/toh-6/dart/web/main.dart

@@ -1,6 +1,5 @@
 // #docplaster
-// #docregion final
+// #docregion , v1, v2
-// #docregion v1
 import 'package:angular2/core.dart';
 import 'package:angular2/platform/browser.dart';
 import 'package:angular2_tour_of_heroes/app_component.dart';
@@ -15,7 +14,7 @@ void main() {
     // [provide(Client, useFactory: () => new BrowserClient(), deps: [])]
   );
 }
-// #enddocregion final
+// #enddocregion v2,
 /*
 // #docregion v1
 import 'package:http/browser_client.dart';

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

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

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

@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-import { HttpModule }     from '@angular/http';
-
-import { AppComponent }   from './app.component';
-import { routing }        from './app.routing';
-
-import { HeroesComponent }      from './heroes.component';
-import { DashboardComponent }   from './dashboard.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-// #docregion hero-search-declaration
-import { HeroSearchComponent } from './hero-search.component';
-// #enddocregion hero-search-declaration
-
-import { HeroService }  from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    FormsModule,
-    routing,
-    HttpModule
-  ],
-// #docregion hero-search-declaration
-
-  declarations: [
-    AppComponent,
-    HeroesComponent,
-    DashboardComponent,
-    HeroDetailComponent,
-    HeroSearchComponent
-  ],
-// #enddocregion hero-search-declaration
-  providers: [
-    HeroService
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {
-}
-// #enddocregion

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

@@ -1,24 +1,31 @@
-// #docregion
+// #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';
 
+// #enddocregion v1
 // Imports for loading & configuring the in-memory web api
-import { HttpModule, XHRBackend } from '@angular/http';
+import { XHRBackend } from '@angular/http';
 
 import { InMemoryBackendService, SEED_DATA } 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 { DashboardComponent }   from './dashboard.component';
 import { HeroDetailComponent }  from './hero-detail.component';
-import { HeroSearchComponent }  from './hero-search.component';
-
 import { HeroService }          from './hero.service';
+// #enddocregion v1, v2
+// #docregion search
+import { HeroSearchComponent }  from './hero-search.component';
+// #docregion v1, v2
 
+// #enddocregion search
 @NgModule({
   imports: [
     BrowserModule,
@@ -26,20 +33,25 @@ import { HeroService }  from './hero.service';
     routing,
     HttpModule
   ],
+  // #docregion search
   declarations: [
     AppComponent,
     HeroesComponent,
     DashboardComponent,
     HeroDetailComponent,
+    // #enddocregion v1, v2
     HeroSearchComponent
+    // #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 ]
 })
 export class AppModule {
 }
-// #enddocregion

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

@@ -6,7 +6,7 @@ block includes
   - var _Angular_Http = 'Dart <code>BrowserClient</code>'
   - var _httpUrl = 'https://pub.dartlang.org/packages/http'
   - var _Angular_http_library = 'Dart <a href="' + _httpUrl + '"><b>http</b></a> package'
-  - var _HTTP_PROVIDERS = 'BrowserClient'
+  - var _HttpModule = 'BrowserClient'
   - var _JSON_stringify = 'JSON.encode'
 
 block start-server-and-watch
@@ -45,6 +45,17 @@ block http-providers
   :marked
     Before our app can use `#{_Http}`, we have to register it as a service provider.
 
+    We should be able to access `!{_Http}` services from anywhere in the application.
+    So we register it in the `bootstrap` call where we
+    launch the application and its root `AppComponent`.
+
+  +makeExcerpt('app/main.ts','v1')
+
+  :marked
+    Notice that we supply `!{_HttpModule}` in a list, as the second parameter to
+    the `bootstrap` method.  This has the same effect as the `providers` list in
+    `@Component` annotation.
+
 block backend
   :marked
     We want to replace `BrowserClient`, the service that talks to the remote server,
@@ -87,9 +98,6 @@ block hero-detail-comp-save-and-goback
 block add-new-hero-via-detail-comp
   //- N/A
 
-block heroes-comp-directives
-  //- N/A
-
 block heroes-comp-add
   //- N/A
 
@@ -198,6 +206,6 @@ block file-summary
   +makeTabs(
     `toh-6/dart/pubspec.yaml,
      toh-6/dart/web/main.dart`,
-    `,final`,
+    null,
     `pubspec.yaml,
      web/main.dart`)

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

@@ -5,7 +5,7 @@ block includes
   - var _Http = 'Http'; // Angular `Http` library name.
   - var _Angular_Http = 'Angular <code>Http</code>'
   - var _Angular_http_library = 'Angular HTTP library'
-  - var _HTTP_PROVIDERS = 'HTTP_PROVIDERS'
+  - var _HttpModule = 'HttpModule'
   - var _JSON_stringify = 'JSON.stringify'
 
 :marked
@@ -53,25 +53,24 @@ block http-library
 block http-providers
   :marked
     Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
-    The `HTTP_PROVIDERS` array from `@angular/http` library holds providers for the complete set of http services.
+    The `HttpModule` from `@angular/http` library holds providers for the complete set of `http` services.
 
-:marked
+    We should be able to access `http` services from anywhere in the application.
-  We should be able to access `!{_Http}` services from anywhere in the application.
+    So we register them in the `imports` array of `app.module.ts` where we
-  So we register them in the `bootstrap` call of <span ngio-ex>main.ts</span> where we
+    bootstrap the application and its root `AppComponent`.
-  launch the application and its root `AppComponent`.
 
-+makeExcerpt('app/main.ts','v1')
+  +makeExcerpt('app/app.module.ts (v1)')
 
-:marked
+  :marked
-  Notice that we supply `!{_HTTP_PROVIDERS}` in !{_an} !{_array} as the second parameter to the `bootstrap` method.
+    Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`.
-  This has the same effect as the `providers` !{_array} in `@Component` !{_decorator}.
 
 .l-main-section
 :marked
   ## Simulating the web API
 
-  We generally recommend registering application-wide services in the root `AppComponent` *providers*.
+  We recommend registering application-wide services in the root
-  Here we're registering in `main` for a special reason.
+  `!{_AppModuleVsAppComp}` *providers*.  <span if-docs="dart">Here we're
+  registering in `main` for a special reason.</span>
 
   Our application is in the early stages of development and far from ready for production.
   We don't even have a web server that can handle requests for heroes.
@@ -79,12 +78,13 @@ block http-providers
 
   We're going to *trick* the HTTP client into fetching and saving data from
   a mock service, the *in-memory web API*.
+  <span if-docs="dart"> The application itself doesn't need to know and
+  shouldn't know about this.  So we'll slip the in-memory web API into the
+  configuration *above* the `AppComponent`.</span>
 
-  The application itself doesn't need to know and shouldn't know about this.
+  Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick:
-  So we'll slip the in-memory web API into the configuration *above* the `AppComponent`.
 
-  Here is a version of `main` that performs this trick
++makeExcerpt(_appModuleTsVsMainTs, 'v2')
-+makeExcerpt('app/main.ts', 'final')
 
 block backend
   :marked
@@ -326,19 +326,6 @@ block add-new-hero-via-detail-comp
   Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions used in the template.
   Let's start with *add*.
 
-block heroes-comp-directives
-  :marked
-    We're using the `HeroDetailComponent` to capture the new hero information.
-    We have to tell Angular about that by importing the `HeroDetailComponent` and referencing it in the component metadata `directives` array.
-  +makeExcerpt('app/heroes.component.ts (HeroDetailComponent)', 'hero-detail-component')
-  .l-sub-section
-    :marked
-      These are the same lines that we removed in the previous [Routing](toh-pt5.html) chapter.
-      We didn't know at the time that we'd need the *HeroDetailComponent* again. So we tidied up.
-
-      Now we *must* put these lines back. If we don't, Angular will ignore the `<my-hero-detail>`
-      tag and pushing the *Add New Hero* button will have no visible effect.
-:marked
   Implement the click handler for the *Add New Hero* button.
 
 +makeExcerpt('app/heroes.component.ts', 'addHero')
@@ -527,10 +514,12 @@ block observable-transformers
 
 +makeExample('app/dashboard.component.html')
 
+- 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 `directives` !{_array}.
+  And finally, we import the `HeroSearchComponent` and add it to the `!{_declarations}` !{_array}:
 
-+makeExcerpt('app/dashboard.component.ts', 'search')
++makeExcerpt(declFile, 'search')
 
 :marked
   Run the app again, go to the *Dashboard*, and enter some text in the search box.
@@ -554,7 +543,8 @@ block filetree
       .children
         .file app.component.ts
         .file app.component.css
-        .file app.routes.ts
+        .file app.module.ts
+        .file app.routing.ts
         .file dashboard.component.css
         .file dashboard.component.html
         .file dashboard.component.ts
@@ -566,7 +556,7 @@ block filetree
         .file hero-search.component.css (new)
         .file hero-search.component.ts (new)
         .file hero-search.service.ts (new)
-        .file rxjs-operators.ts
+        .file rxjs-extensions.ts
         .file hero.service.ts
         .file heroes.component.css
         .file heroes.component.html
@@ -599,6 +589,7 @@ block filetree
 block file-summary
   +makeTabs(
     `toh-6/ts/app/app.component.ts,
+     toh-6/ts/app/app.module.ts,
      toh-6/ts/app/heroes.component.ts,
      toh-6/ts/app/heroes.component.html,
      toh-6/ts/app/heroes.component.css,
@@ -606,8 +597,9 @@ block file-summary
      toh-6/ts/app/hero-detail.component.html,
      toh-6/ts/app/hero.service.ts,
      toh-6/ts/app/in-memory-data.service.ts`,
-    null,
+    ',,,,,,,,',
     `app.comp...ts,
+     app.mod...ts,
      heroes.comp...ts,
      heroes.comp...html,
      heroes.comp...css,
@@ -622,11 +614,11 @@ block file-summary
     toh-6/ts/app/hero-search.component.ts,
     toh-6/ts/app/hero-search.component.html,
     toh-6/ts/app/hero-search.component.css,
-    toh-6/ts/app/rxjs-operators.ts`,
+    toh-6/ts/app/rxjs-extensions.ts`,
     null,
     `hero-search.service.ts,
     hero-search.component.ts,
-    hero-search.service.html,
+    hero-search.component.html,
     hero-search.component.css,
-    rxjs-operators.ts`
+    rxjs-extensions.ts`
   )

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

@@ -5,7 +5,6 @@ block includes
   - var _Http = 'Http'; // Angular `Http` library name.
   - var _Angular_Http = 'Angular <code>Http</code>'
   - var _Angular_http_library = 'Angular HTTP library'
-  - var _HTTP_PROVIDERS = 'HTTP_PROVIDERS'
   - var _HttpModule = 'HttpModule'
   - var _JSON_stringify = 'JSON.stringify'
 
@@ -54,23 +53,24 @@ block http-library
 block http-providers
   :marked
     Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
-    The `HttpModule` from `@angular/http` library holds providers for the complete set of http services.
+    The `HttpModule` from `@angular/http` library holds providers for the complete set of `http` services.
 
-:marked
+    We should be able to access `http` services from anywhere in the application.
-  We should be able to access `!{_Http}` services from anywhere in the application.
+    So we register them in the `imports` array of `app.module.ts` where we
-  So we register them in the `imports` array of <span ngio-ex>app.module.ts</span> where we
     bootstrap the application and its root `AppComponent`.
 
-+makeExample('app/app.module.2.ts','', 'app.module.ts (v.1)')
+  +makeExcerpt('app/app.module.ts (v1)')
 
-:marked
+  :marked
     Notice that we supply `!{_HttpModule}` as part of the *imports* !{_array} in root NgModule `AppModule`.
 
 .l-main-section
 :marked
   ## Simulating the web API
 
-  We recommend registering application-wide services in the root `NgModule` *providers*.
+  We recommend registering application-wide services in the root
+  `!{_AppModuleVsAppComp}` *providers*.  <span if-docs="dart">Here we're
+  registering in `main` for a special reason.</span>
 
   Our application is in the early stages of development and far from ready for production.
   We don't even have a web server that can handle requests for heroes.
@@ -78,9 +78,13 @@ block http-providers
 
   We're going to *trick* the HTTP client into fetching and saving data from
   a mock service, the *in-memory web API*.
+  <span if-docs="dart"> The application itself doesn't need to know and
+  shouldn't know about this.  So we'll slip the in-memory web API into the
+  configuration *above* the `AppComponent`.</span>
 
-  Here is a version of `app.module.ts` that performs this trick
+  Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick:
-+makeExample('app/app.module.1.ts', '', 'app.module.ts (final)')
+
++makeExcerpt(_appModuleTsVsMainTs, 'v2')
 
 block backend
   :marked
@@ -510,11 +514,12 @@ block observable-transformers
 
 +makeExample('app/dashboard.component.html')
 
+- 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} in
+  And finally, we import the `HeroSearchComponent` and add it to the `!{_declarations}` !{_array}:
-  `app.module.ts`.
 
-+makeExcerpt('app/app.module.2.ts', 'hero-search-declaration')
++makeExcerpt(declFile, 'search')
 
 :marked
   Run the app again, go to the *Dashboard*, and enter some text in the search box.
@@ -551,7 +556,7 @@ block filetree
         .file hero-search.component.css (new)
         .file hero-search.component.ts (new)
         .file hero-search.service.ts (new)
-        .file rxjs-operators.ts
+        .file rxjs-extensions.ts
         .file hero.service.ts
         .file heroes.component.css
         .file heroes.component.html
@@ -609,12 +614,11 @@ block file-summary
     toh-6/ts/app/hero-search.component.ts,
     toh-6/ts/app/hero-search.component.html,
     toh-6/ts/app/hero-search.component.css,
-    toh-6/ts/app/rxjs-operators.ts`,
+    toh-6/ts/app/rxjs-extensions.ts`,
     null,
     `hero-search.service.ts,
     hero-search.component.ts,
-    hero-search.service.html,
+    hero-search.component.html,
     hero-search.component.css,
-    hero-search.component.css,
+    rxjs-extensions.ts`
-    rxjs-operators.ts`
   )