docs(toh-5): copyedits (#3435)

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

@@ -5,7 +5,7 @@ block includes
   - var _appRoutingTsVsAppComp = 'app.module.ts'
   - var _RoutesVsAtRouteConfig = 'Routes'
   - var _RouterModuleVsRouterDirectives = 'RouterModule'
-  - var _redirectTo = 'redirectTo'
+  - var _redirect = 'redirect'
 
 :marked
   There are new requirements for the Tour of Heroes app:
@@ -65,13 +65,14 @@ block keep-app-running
     ## Keep the app transpiling and running
     Enter the following command in the terminal window:
 
-code-example(language="sh" class="code-shell").
+  code-example(language="sh" class="code-shell").
-  npm start
+    npm start
+
+  :marked
+    This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
+    The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
 
 :marked
-  This command runs the TypeScript compiler in "watch mode", recompiling automatically when the code changes.
-  The command simultaneously launches the app in a browser and refreshes the browser when the code changes.
-
   You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.
 
   ## Action plan
@@ -103,13 +104,13 @@ code-example(language="sh" class="code-shell").
   ### *HeroesComponent*
 
   `AppComponent` is already dedicated to *Heroes*.
-  Instead of moving the code out of `AppComponent`, rename it `HeroesComponent`
+  Instead of moving the code out of `AppComponent`, rename it to `HeroesComponent`
   and create a separate `AppComponent` shell.
 
   Do the following:
-  * Rename the <span ngio-ex>app.component.ts</span> file as <span ngio-ex>heroes.component.ts</span>.
+  * Rename the <span ngio-ex>app.component.ts</span> file to <span ngio-ex>heroes.component.ts</span>.
-  * Rename the `AppComponent` class as `HeroesComponent` (rename locally, _only_ in this file).
+  * Rename the `AppComponent` class to `HeroesComponent` (rename locally, _only_ in this file).
-  * Rename the selector `my-app` as `my-heroes`.
+  * Rename the selector `my-app` to `my-heroes`.
 
 +makeExcerpt('src/app/heroes.component.ts (showing renamings only)', 'renaming')
 
@@ -117,7 +118,7 @@ code-example(language="sh" class="code-shell").
   ### Create *AppComponent*
 
   The new `AppComponent` is the application shell.
-  It will have some navigation links at the top and a display area below for the pages users navigate to.
+  It will have some navigation links at the top and a display area below.
 
   Perform these steps:
 
@@ -147,9 +148,9 @@ block app-comp-v1
   The app still runs and displays heroes.
 
 :marked
-  ## Adding routing
+  ## Add routing
 
-  Instead of  displaying automatically, heroes should display after users click a button.
+  Instead of displaying automatically, heroes should display after users click a button.
   In other words, users should be able to navigate to the list of heroes.
 
   Use the Angular router to enable navigation.
@@ -307,11 +308,11 @@ block routerLink
   +makeExcerpt('src/app/app.module.ts', 'dashboard')
 
 :marked
-  ### Add a redirect route
+  ### Add a !{_redirect} route
 
+  Currently, the browser launches with `/` in the address bar.
   When the app starts, it should show the dashboard and
   display a `/dashboard` URL in the browser address bar.
-  Currently, the browser launches with `/` in the address bar.
 
 block redirect-vs-use-as-default
   :marked
@@ -387,9 +388,9 @@ block templateUrl-path-resolution
 
   * Define a `heroes` !{_array} property.
   * Inject the `HeroService` in the constructor and hold it in a private `!{_priv}heroService` field.
-  * Call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
+  * Call the service to get heroes inside the Angular `ngOnInit()` lifecycle hook.
 
-  In this dashboard you specify four heroes (2nd, 3rd, 4th, and 5th)<span if-docs="ts"> with the `Array.slice` method</span>.
+  In this dashboard you specify four heroes (2nd, 3rd, 4th, and 5th)<span if-docs="ts"> with the `Array.slice()` method</span>.
 
   Refresh the browser to see four hero names in the new dashboard.
 
@@ -480,10 +481,8 @@ block route-params
   Add the following imports:
 
 - var _vers = _docsFor == 'dart' ? '' : '.1'
-
 +makeExcerpt('src/app/hero-detail.component' + _vers + '.ts', 'added-imports', 'src/app/hero-detail.component')
 
-
 - var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute'
 :marked
   Inject the `!{_ActivatedRoute}`, `HeroService`, and `Location` services
@@ -504,7 +503,7 @@ block route-params
 
 block ngOnInit
   :marked
-    Inside the `ngOnInit` lifecycle hook, use the `params` Observable to
+    Inside the `ngOnInit()` lifecycle hook, use the `params` Observable to
     extract the `id` parameter value from the `ActivatedRoute` service
     and use the `HeroService` to fetch the hero with that `id`.
 
@@ -519,7 +518,7 @@ block extract-id
     If a user re-navigates to this component while a `getHero` request is still processing,
     `switchMap` cancels the old request and then calls `HeroService.getHero()` again.
 
-- var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator'
+- 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 the route parameter value is converted to a number with the !{_str2int}.
@@ -536,10 +535,10 @@ block extract-id
       memory leaks, so you don't need to unsubscribe from the route `params` `Observable`.
 
 :marked
-  ### Add *HeroService.getHero*
+  ### Add *HeroService.getHero()*
 
   In the previous code snippet, `HeroService` doesn't have a `getHero()` method. To fix this issue,
-  open `HeroService` and add a `getHero()` method that filters the heroes list from `getHeroes` by `id`.
+  open `HeroService` and add a `getHero()` method that filters the heroes list from `getHeroes()` by `id`.
 
 +makeExcerpt('src/app/hero.service.ts', 'getHero')
 
@@ -554,13 +553,12 @@ block extract-id
 
 +makeExcerpt('src/app/hero-detail.component.ts', 'goBack')
 
-- var _CanDeactivateGuard = _docsFor == 'dart' ? '<em>routerCanDeactivate</em> hook' : '<em>CanDeactivate</em> guard'
+- var _CanDeactivateGuard = _docsFor == 'dart' ? '<em>routerCanDeactivate()</em> hook' : '<em>CanDeactivate</em> guard'
-- var _CanDeactivateGuardUri = _docsFor == 'dart' ? 'angular2.router/CanDeactivate-class' : 'router/index/CanDeactivate-interface'
 .l-sub-section
   :marked
     Going back too far could take users out of the app.
     In a real app, you can prevent this issue with the !{_CanDeactivateGuard}.
-    Read more on the [CanDeactivate](../api/!{_CanDeactivateGuardUri}.html) page.
+    Read more on the [CanDeactivate](../api/router/index/CanDeactivate-interface.html) page.
 
 :marked
   You'll wire this method with an event binding to a *Back* button that you'll add to the component template.
@@ -660,14 +658,13 @@ block extract-id
     Delete the routing configuration from `AppModule` and import the `AppRoutingModule`.
     Use an ES `import` statement *and* add it to the `NgModule.imports` list.
 
-:marked
     Here is the revised `AppModule`, compared to its pre-refactor state:
 
-+makeTabs(
+  +makeTabs(
     `toh-5/ts/src/app/app.module.ts, toh-5/ts/src/app/app.module.3.ts`,
      null,
     `src/app/app.module.ts (after), src/app/app.module.ts (before)`)
-:marked
+  :marked
     The revised and simplified `AppModule` is focused on identifying the key pieces of the app.
 
 .l-main-section
@@ -771,14 +768,14 @@ block heroes-component-cleanup
 
   1. Import the `router` from the Angular router library.
   1. Inject the `router` in the constructor, along with the `HeroService`.
-  1. Implement `gotoDetail()` by calling the `router.navigate()` method.
+  1. Implement `gotoDetail()` by calling the router `navigate()` method.
 
 +makeExcerpt('src/app/heroes.component.ts', 'gotoDetail')
 
 :marked
   Note that you're passing a two-element *link parameters !{_array}*&mdash;a
-  path and the route parameter&mdash;to
+  !{_pathVsName} and the route parameter&mdash;to
-  the `router.navigate()` method, just as you did in the `[routerLink]` binding
+  the router `navigate()` method, just as you did in the `[routerLink]` binding
   back in the `DashboardComponent`.
   Here's the revised `HeroesComponent` class:
 
@@ -821,13 +818,12 @@ block heroes-component-cleanup
 
   Here's the content for the component CSS files.
 
-block css-files
++makeTabs(
-  +makeTabs(
+  `toh-5/ts/src/app/hero-detail.component.css,
-    `toh-5/ts/src/app/hero-detail.component.css,
+  toh-5/ts/src/app/dashboard.component.css`,
-    toh-5/ts/src/app/dashboard.component.css`,
+  null,
-    null,
+  `src/app/hero-detail.component.css,
-    `src/app/hero-detail.component.css,
+  src/app/dashboard.component.css`)
-    src/app/dashboard.component.css`)
 
 :marked
   ### Style the navigation links
@@ -848,7 +844,6 @@ block css-files
       add a class to the HTML navigation element whose route matches the active route.
       All you have to do is define the style for it.
 
-
     +makeExcerpt('src/app/app.component.ts (active router links)', 'template')
 
 :marked