docs(toh-5/6): update Dart to match TS, with minor tweaks to TS (#2869)

* sync cache before making changes to Dart files

* docs(toh-5): updates for Dart and tweaks for TS

* final sync of toh cache files

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

@@ -42,7 +42,7 @@ block angular-router
   :marked
     The Angular router is a combination of multiple services
     (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), and a
-    configuration annotation (`RouteConfig`). We'll get them all by importing
+    configuration annotation (`RouteConfig`). You get them all by importing
     the router library:
 
   +makeExcerpt('app/app.component.ts (router imports)', 'import-router')
@@ -53,22 +53,22 @@ block angular-router
     Not all apps need routing, which is why the Angular *Component Router* is
     in a separate, optional library module.
 
-    Like for any service, we make router services available to the application
+    Like for any service, you make router services available to the application
-    by adding them to the `providers` list.  Let's update the `directives` and
+    by adding them to the `providers` list.  Update the `directives` and
     `providers` lists to include the router assets:
 
   +makeExcerpt('app/app.component.ts (excerpt)', 'directives-and-providers')
 
   :marked
-    Notice that we also removed the `HeroesComponent` from the `directives` list.
+    `AppComponent` no longer shows heroes, that will be the router's job,
-    `AppComponent` no longer shows heroes; that will be the router's job.
+    so you can remove the `HeroesComponent` from the `directives` list.
-    We'll soon remove `<my-heroes>` from the template too.
+    You'll soon remove `<my-heroes>` from the template too.
 
 block router-config-intro
   :marked
     ### Configure routes and add the router
 
-    The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig`
+    The `AppComponent` doesn't have a router yet. You'll use the `@RouteConfig`
     annotation to simultaneously:
 
     - Assign a router to the component
@@ -77,12 +77,12 @@ block router-config-intro
 block routerLink
   :marked
     Notice the `[routerLink]` binding in the anchor tag.
-    We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list
+    You bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list
     that tells the router where to navigate when the user clicks the link.
 
-    We define a *routing instruction* with a *link parameters list*.
+    You define a *routing instruction* with a *link parameters list*.
     The list only has one element in our little sample, the quoted ***name* of the route** to follow.
-    Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`.
+    Looking back at the route configuration, confirm that `'Heroes'` is the name of the route to the `HeroesComponent`.
   .l-sub-section
     :marked
       Learn about the *link parameters list*
@@ -90,8 +90,8 @@ block routerLink
 
 block redirect-vs-use-as-default
   :marked
-    We don't need a route definition for that. Instead,
+    You don't need a route definition for that. Instead,
-    we add `useAsDefault: true` to the dashboard *route definition* and the
+    add `useAsDefault: true` to the dashboard *route definition* and the
     router will display the dashboard when the browser URL doesn't match an existing route.
 
 block templateUrl-path-resolution
@@ -105,7 +105,7 @@ block templateUrl-path-resolution
 
 block route-params
   :marked
-    We will no longer receive the hero in a parent component property binding.
+    You will no longer receive the hero in a parent component property binding.
     The new `HeroDetailComponent` should take the `id` parameter from the router's
     `RouteParams` service and use the `HeroService` to fetch the hero with that `id`.
 
@@ -116,12 +116,12 @@ block ngOnInit
 
 block extract-id
   :marked
-    Notice how we extract the `id` by calling the `RouteParams.get` method.
+    Notice how you can extract the `id` by calling the `RouteParams.get` method.
 
 block heroes-component-cleanup
   :marked
     Because the template for `HeroesComponent` no longer uses `HeroDetailComponent`
-    directly &mdash; instead using the router to _navigate_ to it &mdash; we can
+    directly &mdash; instead using the router to _navigate_ to it &mdash; you can
     drop the `directives` argument from `@Component` and remove the unused hero detail
     import. The revised `@Component` looks like this:
 
@@ -138,7 +138,7 @@ block router-link-active
     **The *router-link-active* class**
 
     The Angular Router adds the `router-link-active` class to the HTML navigation element
-    whose route matches the active route. All we have to do is define the style for it. Sweet!
+    whose route matches the active route. All you have to do is define the style for it. Sweet!
 
 block file-tree-end
   .filetree

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

@@ -3,7 +3,6 @@
 block includes
   include ../_util-fns
   - var _appRoutingTsVsAppComp = 'app.module.ts'
-  - var _declsVsDirectives = 'declarations'
   - var _RoutesVsAtRouteConfig = 'Routes'
   - var _RouterModuleVsRouterDirectives = 'RouterModule'
   - var _redirectTo = 'redirectTo'
@@ -511,10 +510,16 @@ block route-params
 
 +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
 
++ifDocsFor('ts')
+  :marked
+    Also import the `switchMap` operator to use later with the route parameters `Observable`.
+
+  +makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import')
+
 :marked
   We tell the class that we want to implement the `OnInit` interface.
 
-+makeExcerpt('app/hero-detail.component.ts', 'implement', '')(format=".")
++makeExcerpt('app/hero-detail.component.ts', 'implement', '')
 
 block ngOnInit
   :marked
@@ -526,14 +531,27 @@ block ngOnInit
 
 block extract-id
   :marked
-    Notice how we extract the `id` by calling the `forEach` method
+    Note how the `switchMap` operator maps the id in the observable route parameters
-    which will deliver our !{_array} of route parameters.
+    to a new `Observable`, the result of the `HeroService.getHero` method.
+
+    If the user re-navigates to this component while a getHero request is still inflight,
+    switchMap cancels that old request before calling `HeroService.getHero` again.
 
 - var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator'
 :marked
   The hero `id` is a number. Route parameters are *always strings*.
   So we convert the route parameter value to a number with the !{_str2int}.
 
++ifDocsFor('ts')
+  .l-sub-section
+    :marked
+      ### Do I need to unsubscribe?
+
+      The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes
+      the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
+      memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`.
+
+:marked
   ### Add *HeroService.getHero*
 
   The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
@@ -654,16 +672,16 @@ block extract-id
   +makeExample('app/app-routing.module.ts')
   :marked
     Noteworthy points, typical of _Routing Modules_:
-    * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
+    * Pulls the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
 
-    * Add `RouterModule.forRoot(routes)` to `imports`.
+    * Adds `RouterModule.forRoot(routes)` to `imports`.
 
-    * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
+    * Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
     such as `RouterLink` and `RouterOutlet`.
 
     * No `declarations`!  Declarations are the responsibility of the companion module.
 
-    * Add module `providers` for guard services if you have them; there are none in this example.
+    * Adds module `providers` for guard services if you have them; there are none in this example.
 
     ### Update _AppModule_
 
@@ -676,7 +694,7 @@ block extract-id
      null,
     `app/app.module.ts (after), app/app.module.ts (before)`)
   :marked
-    It's simpler and focused on indentifying the key pieces of the application.
+    It's simpler and focused on identifying the key pieces of the application.
 
 .l-main-section
 :marked
@@ -870,9 +888,7 @@ block css-files
   We can also create styles at the *application level* outside of any component.
 
   Our designers provided some basic styles to apply to elements across the entire app.
-  These correspond to the full set of master styles that we
+  These correspond to the full set of master styles that we installed earlier during [setup](../guide/setup.html).
-  introduced earlier (see
-  [QuickStart, "Add some style"](../quickstart.html#add-some-style)).
   Here is an excerpt:
 
 +makeExcerpt('styles.css (excerpt)', 'toh')

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

@@ -618,3 +618,10 @@ block file-summary
     hero-search.component.css,
     rxjs-extensions.ts`
   )
+
+.l-sub-section
+  :marked
+    ### Next Step
+
+    Return to the [learning path](../guide/learning-angular.html#architecture) where 
+    you can read about the concepts and practices you discovered in this tutorial.

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

@@ -510,15 +510,16 @@ block route-params
 
 +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
 
-:marked
++ifDocsFor('ts')
-  We'll also import the `switchMap` operator to use later with the route parameters `Observable`.
+  :marked
+    Also import the `switchMap` operator to use later with the route parameters `Observable`.
 
-+makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import')
+  +makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import')
 
 :marked
   We tell the class that we want to implement the `OnInit` interface.
 
-+makeExcerpt('app/hero-detail.component.ts', 'implement', '')(format=".")
++makeExcerpt('app/hero-detail.component.ts', 'implement', '')
 
 block ngOnInit
   :marked
@@ -541,13 +542,14 @@ block extract-id
   The hero `id` is a number. Route parameters are *always strings*.
   So we convert the route parameter value to a number with the !{_str2int}.
 
-.l-sub-section
++ifDocsFor('ts')
-  :marked
+  .l-sub-section
-    ### Do I need to unsubscribe?
+    :marked
+      ### Do I need to unsubscribe?
 
-    The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes
+      The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes
-    the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
+      the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
-    memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`.
+      memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`.
 
 :marked
   ### Add *HeroService.getHero*
@@ -886,7 +888,7 @@ block css-files
   We can also create styles at the *application level* outside of any component.
 
   Our designers provided some basic styles to apply to elements across the entire app.
-  These correspond to the full set of master styles that we installed earlier during [setup](../setup.html).
+  These correspond to the full set of master styles that we installed earlier during [setup](../guide/setup.html).
   Here is an excerpt:
 
 +makeExcerpt('styles.css (excerpt)', 'toh')