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/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts

@@ -15,7 +15,7 @@ describe('HeroDetailComponent - no TestBed', () => {
   beforeEach((done: any) => {
     expectedHero = new Hero(42, 'Bubba');
     activatedRoute = new ActivatedRouteStub();
-    activatedRoute.testParams = { id: expectedHero.id };
+    activatedRoute.testParamMap = { id: expectedHero.id };
 
     router = jasmine.createSpyObj('router', ['navigate']);
 

aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts

@@ -53,7 +53,7 @@ function overrideSetup() {
   // #enddocregion hds-spy
 
   // the `id` value is irrelevant because ignored by service stub
-  beforeEach(() => activatedRoute.testParams = { id: 99999 } );
+  beforeEach(() => activatedRoute.testParamMap = { id: 99999 } );
 
   // #docregion setup-override
   beforeEach( async(() => {
@@ -158,7 +158,7 @@ function heroModuleSetup() {
 
     beforeEach( async(() => {
       expectedHero = firstHero;
-      activatedRoute.testParams = { id: expectedHero.id };
+      activatedRoute.testParamMap = { id: expectedHero.id };
       createComponent();
     }));
 
@@ -229,7 +229,7 @@ function heroModuleSetup() {
   // #docregion route-bad-id
   describe('when navigate to non-existant hero id', () => {
     beforeEach( async(() => {
-      activatedRoute.testParams = { id: 99999 };
+      activatedRoute.testParamMap = { id: 99999 };
       createComponent();
     }));
 
@@ -279,7 +279,7 @@ function formsModuleSetup() {
 
   it('should display 1st hero\'s name', fakeAsync(() => {
     const expectedHero = firstHero;
-    activatedRoute.testParams = { id: expectedHero.id };
+    activatedRoute.testParamMap = { id: expectedHero.id };
     createComponent().then(() => {
       expect(page.nameDisplay.textContent).toBe(expectedHero.name);
     });
@@ -307,7 +307,7 @@ function sharedModuleSetup() {
 
   it('should display 1st hero\'s name', fakeAsync(() => {
     const expectedHero = firstHero;
-    activatedRoute.testParams = { id: expectedHero.id };
+    activatedRoute.testParamMap = { id: expectedHero.id };
     createComponent().then(() => {
       expect(page.nameDisplay.textContent).toBe(expectedHero.name);
     });

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

@@ -29,7 +29,7 @@ export class HeroDetailComponent implements OnInit {
   // #docregion ng-on-init
   ngOnInit(): void {
     // get hero when `id` param changes
-    this.route.params.subscribe(p => this.getHero(p && p['id']));
+    this.route.paramMap.subscribe(p => this.getHero(p.has('id') && p.get('id')));
   }
   // #enddocregion ng-on-init
 

aio/content/examples/testing/src/testing/router-stubs.ts

@@ -30,28 +30,29 @@ export class RouterStub {
 }
 
 
-// Only implements params and part of snapshot.params
+// Only implements params and part of snapshot.paramMap
 // #docregion activated-route-stub
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { convertToParamMap, ParamMap } from '@angular/router';
 
 @Injectable()
 export class ActivatedRouteStub {
 
-  // ActivatedRoute.params is Observable
-  private subject = new BehaviorSubject(this.testParams);
-  params = this.subject.asObservable();
+  // ActivatedRoute.paramMap is Observable
+  private subject = new BehaviorSubject(convertToParamMap(this.testParamMap));
+  paramMap = this.subject.asObservable();
 
   // Test parameters
-  private _testParams: {};
-  get testParams() { return this._testParams; }
-  set testParams(params: {}) {
-    this._testParams = params;
-    this.subject.next(params);
+  private _testParamMap: ParamMap;
+  get testParamMap() { return this._testParamMap; }
+  set testParamMap(params: {}) {
+    this._testParamMap = convertToParamMap(params);
+    this.subject.next(this._testParamMap);
   }
 
-  // ActivatedRoute.snapshot.params
+  // ActivatedRoute.snapshot.paramMap
   get snapshot() {
-    return { params: this.testParams };
+    return { paramMap: this.testParamMap };
   }
 }
 // #enddocregion activated-route-stub