docs: Updated router guide content and examples for paramMap

and queryParamMap, tracing, and incidental improvements.
closes #16991 and #16259 which it also fixes.

aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts

@@ -22,8 +22,8 @@ export class AdminDashboardComponent implements OnInit {
   ngOnInit() {
     // Capture the session ID if available
     this.sessionId = this.route
-      .queryParams
-      .map(params => params['session_id'] || 'None');
+      .queryParamMap
+      .map(params => params.get('session_id') || 'None');
 
     // Capture the fragment if available
     this.token = this.route

aio/content/examples/router/src/app/admin/admin-dashboard.component.ts

@@ -36,8 +36,8 @@ export class AdminDashboardComponent implements OnInit {
   ngOnInit() {
     // Capture the session ID if available
     this.sessionId = this.route
-      .queryParams
-      .map(params => params['session_id'] || 'None');
+      .queryParamMap
+      .map(params => params.get('session_id') || 'None');
 
     // Capture the fragment if available
     this.token = this.route

aio/content/examples/router/src/app/app-routing.module.1.ts

@@ -17,7 +17,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule

aio/content/examples/router/src/app/app-routing.module.2.ts

@@ -15,7 +15,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule

aio/content/examples/router/src/app/app-routing.module.3.ts

@@ -22,7 +22,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule

aio/content/examples/router/src/app/app-routing.module.4.ts

@@ -18,7 +18,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule

aio/content/examples/router/src/app/app-routing.module.5.ts

@@ -33,7 +33,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   exports: [
     RouterModule

aio/content/examples/router/src/app/app-routing.module.6.ts

@@ -37,9 +37,12 @@ const appRoutes: Routes = [
   imports: [
     // #docregion forRoot
     RouterModule.forRoot(
-      appRoutes
+      appRoutes,
       // #enddocregion preload-v1
-      , { preloadingStrategy: PreloadAllModules }
+      {
+        enableTracing: true, // <-- debugging purposes only
+        preloadingStrategy: PreloadAllModules
+      }
       // #docregion preload-v1
     )
     // #enddocregion forRoot

aio/content/examples/router/src/app/app-routing.module.ts

@@ -36,7 +36,11 @@ const appRoutes: Routes = [
   imports: [
     RouterModule.forRoot(
       appRoutes,
-      { preloadingStrategy: SelectivePreloadingStrategy }
+      {
+        enableTracing: true, // <-- debugging purposes only
+        preloadingStrategy: SelectivePreloadingStrategy,
+
+      }
     )
   ],
   exports: [

aio/content/examples/router/src/app/app.module.0.ts

@@ -26,7 +26,10 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
     // other imports here
   ],
 // #enddocregion

aio/content/examples/router/src/app/app.module.1.ts

@@ -33,7 +33,10 @@ const appRoutes: Routes = [
   imports: [
     BrowserModule,
     FormsModule,
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(
+      appRoutes,
+      { enableTracing: true } // <-- debugging purposes only
+    )
   ],
   declarations: [
     AppComponent,

aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts

@@ -15,7 +15,7 @@ export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent>
     state: RouterStateSnapshot
   ): Promise<boolean> | boolean {
     // Get the Crisis Center ID
-    console.log(route.params['id']);
+    console.log(route.paramMap.get('id'));
 
     // Get the current URL
     console.log(state.url);

aio/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts

@@ -1,13 +1,9 @@
 // #docregion
-// #docplaster
 import { Component } from '@angular/core';
 
-// #docregion minus-imports
 @Component({
   template: `
     <p>Welcome to the Crisis Center</p>
   `
 })
 export class CrisisCenterHomeComponent { }
-// #enddocregion minus-imports
-// #enddocregion

aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts

@@ -31,6 +31,7 @@ const crisisCenterRoutes: Routes = [
     ]
   }
 ];
+// #enddocregion routes
 
 @NgModule({
   imports: [

aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts

@@ -1,8 +1,6 @@
 // #docregion
-// #docplaster
 import { Component } from '@angular/core';
 
-// #docregion minus-imports
 @Component({
   template:  `
     <h2>CRISIS CENTER</h2>
@@ -10,5 +8,3 @@ import { Component } from '@angular/core';
   `
 })
 export class CrisisCenterComponent { }
-// #enddocregion minus-imports
-// #enddocregion

aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts

@@ -10,7 +10,7 @@ export class CrisisDetailResolver implements Resolve<Crisis> {
   constructor(private cs: CrisisService, private router: Router) {}
 
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
-    let id = route.params['id'];
+    let id = route.paramMap.get('id');
 
     return this.cs.getCrisis(id).then(crisis => {
       if (crisis) {

aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts

@@ -2,7 +2,7 @@
 // #docregion
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit, HostBinding } from '@angular/core';
-import { ActivatedRoute, Router, Params } from '@angular/router';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 
 import { slideInDownAnimation }   from '../animations';
 import { Crisis, CrisisService }  from './crisis.service';
@@ -44,8 +44,8 @@ export class CrisisDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params
-      .switchMap((params: Params) => this.service.getCrisis(params['id']))
+    this.route.paramMap
+      .switchMap((params: ParamMap) => this.service.getCrisis(params.get('id')))
       .subscribe((crisis: Crisis) => {
         if (crisis) {
           this.editName = crisis.name;

aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts

@@ -1,7 +1,7 @@
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }              from '@angular/core';
-import { ActivatedRoute, Router, Params } from '@angular/router';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
 import { Observable }            from 'rxjs/Observable';
@@ -31,9 +31,9 @@ export class CrisisListComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.crises = this.route.params
-      .switchMap((params: Params) => {
-        this.selectedId = +params['id'];
+    this.crises = this.route.paramMap
+      .switchMap((params: ParamMap) => {
+        this.selectedId = +params.get('id');
         return this.service.getCrises();
       });
   }

aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts

@@ -1,7 +1,7 @@
 // #docregion
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
-import { ActivatedRoute, Router, Params } from '@angular/router';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 
 import { Observable }            from 'rxjs/Observable';
 
@@ -38,9 +38,9 @@ export class CrisisListComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.crises = this.route.params
-      .switchMap((params: Params) => {
-        this.selectedId = +params['id'];
+    this.crises = this.route.paramMap
+      .switchMap((params: ParamMap) => {
+        this.selectedId = +params.get('id');
         return this.service.getCrises();
       });
   }

aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts

@@ -5,7 +5,7 @@ import 'rxjs/add/operator/switchMap';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit } from '@angular/core';
 // #docregion imports
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 // #enddocregion imports
 
 import { Hero, HeroService } from './hero.service';
@@ -40,9 +40,9 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params
-      // (+) converts string 'id' to a number
-      .switchMap((params: Params) => this.service.getHero(+params['id']))
+    this.route.paramMap
+      .switchMap((params: ParamMap) =>
+        this.service.getHero(params.get('id')))
       .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit

aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts

@@ -33,8 +33,7 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion snapshot
   ngOnInit() {
-    // (+) converts string 'id' to a number
-    let id = +this.route.snapshot.params['id'];
+    let id = this.route.snapshot.paramMap.get('id');
 
     this.service.getHero(id)
       .then((hero: Hero) => this.hero = hero);

aio/content/examples/router/src/app/heroes/hero-detail.component.ts

@@ -4,7 +4,7 @@
 import 'rxjs/add/operator/switchMap';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit, HostBinding } from '@angular/core';
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 
 import { slideInDownAnimation } from '../animations';
 
@@ -47,9 +47,9 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params
-      // (+) converts string 'id' to a number
-      .switchMap((params: Params) => this.service.getHero(+params['id']))
+    this.route.paramMap
+      .switchMap((params: ParamMap) =>
+        this.service.getHero(params.get('id')))
       .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit

aio/content/examples/router/src/app/heroes/hero-list.component.ts

@@ -7,7 +7,7 @@ import { Observable } from 'rxjs/Observable';
 // #enddocregion rxjs-imports
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
-import { Router, ActivatedRoute, Params } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 // #enddocregion import-router
 
 import { Hero, HeroService }  from './hero.service';
@@ -41,9 +41,10 @@ export class HeroListComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.heroes = this.route.params
-      .switchMap((params: Params) => {
-        this.selectedId = +params['id'];
+    this.heroes = this.route.paramMap
+      .switchMap((params: ParamMap) => {
+        // (+) before `params.get()` turns the string into a number
+        this.selectedId = +params.get('id');
         return this.service.getHeroes();
       });
   }

aio/content/examples/router/src/app/heroes/hero.service.ts

@@ -22,6 +22,7 @@ export class HeroService {
 
   getHero(id: number | string) {
     return heroesPromise
+      // (+) before `id` turns the string into a number
       .then(heroes => heroes.find(hero => hero.id === +id));
   }
 }

aio/content/examples/router/src/app/login.component.ts

@@ -38,7 +38,7 @@ export class LoginComponent {
         // Set our navigation extras object
         // that passes on our global query params and fragment
         let navigationExtras: NavigationExtras = {
-          preserveQueryParams: true,
+          queryParamsHandling: 'preserve',
           preserveFragment: true
         };