build: enable strictTemplates, strictBindCallApply, and strictFunctionTypes

- fix related build errors
- complete `this._destroyed` in `ngOnDestroy()`
- exclude `dist/` from linting

Author: Splaktar

src/app/material-docs-app.ts

@@ -1,5 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {Router, NavigationEnd} from '@angular/router';
+import {Event, NavigationEnd, Router} from '@angular/router';
 import {filter} from 'rxjs/operators';
 
 import {GaService} from './shared/ga/ga';
@@ -16,16 +16,17 @@ export class MaterialDocsApp {
     let previousRoute = router.routerState.snapshot.url;
 
     router.events
-      .pipe(filter(event => event instanceof NavigationEnd))
-      .subscribe((data: NavigationEnd) => {
+      .pipe(filter((event: Event) => event instanceof NavigationEnd))
+      .subscribe((data: Event) => {
+        const urlAfterRedirects = (data as NavigationEnd).urlAfterRedirects;
         // We want to reset the scroll position on navigation except when navigating within
         // the documentation for a single component.
-        if (!isNavigationWithinComponentView(previousRoute, data.urlAfterRedirects)) {
+        if (!isNavigationWithinComponentView(previousRoute, urlAfterRedirects)) {
           resetScrollPosition();
         }
 
-        previousRoute = data.urlAfterRedirects;
-        ga.locationChanged(data.urlAfterRedirects);
+        previousRoute = urlAfterRedirects;
+        ga.locationChanged(urlAfterRedirects);
       });
   }
 }

src/app/pages/component-viewer/component-viewer.ts

@@ -36,31 +36,33 @@ export class ComponentViewer implements OnDestroy {
               public _componentPageTitle: ComponentPageTitle,
               public docItems: DocumentationItems,
               ) {
-    let params = [_route.params];
+    let routeAndParentParams = [_route.params];
     if (_route.parent) {
-      params.push(_route.parent.params);
+      routeAndParentParams.push(_route.parent.params);
     }
     // Listen to changes on the current route for the doc id (e.g. button/checkbox) and the
     // parent route for the section (material/cdk).
-    combineLatest(params).pipe(
-        map((p: [Params, Params]) => ({id: p[0]['id'], section: p[1]['section']})),
-        map(p => ({doc: docItems.getItemById(p.id, p.section), section: p.section}),
-        takeUntil(this._destroyed))
-        ).subscribe(d => {
-          if (d.doc !== undefined) {
-            this.componentDocItem.next(d.doc);
-            this._componentPageTitle.title = `${d.doc.name}`;
-            d.doc.examples && d.doc.examples.length ?
-                this.sections.add('examples') :
-                this.sections.delete('examples');
-          } else {
-            this.router.navigate(['/' + d.section]);
-          }
-        });
+    combineLatest(routeAndParentParams).pipe(
+      map((params: Params[]) => ({id: params[0]['id'], section: params[1]['section']})),
+      map((docIdAndSection: {id: string, section: string}) =>
+          ({doc: docItems.getItemById(docIdAndSection.id, docIdAndSection.section),
+            section: docIdAndSection.section}), takeUntil(this._destroyed))
+    ).subscribe((docItemAndSection: {doc: DocItem | undefined, section: string}) => {
+      if (docItemAndSection.doc !== undefined) {
+        this.componentDocItem.next(docItemAndSection.doc);
+        this._componentPageTitle.title = `${docItemAndSection.doc.name}`;
+        docItemAndSection.doc.examples && docItemAndSection.doc.examples.length ?
+          this.sections.add('examples') :
+          this.sections.delete('examples');
+      } else {
+        this.router.navigate(['/' + docItemAndSection.section]);
+      }
+    });
   }
 
   ngOnDestroy(): void {
     this._destroyed.next();
+    this._destroyed.complete();
   }
 }
 

src/app/shared/table-of-contents/table-of-contents.ts

@@ -107,9 +107,9 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
   addHeaders(sectionName: string, docViewerContent: HTMLElement) {
     const headers = docViewerContent.querySelectorAll('h3, h4');
     const links: Link[] = [];
-    headers.forEach((header: HTMLElement) => {
+    headers.forEach((header: Element) => {
       // remove the 'link' icon name from the inner text
-      const name = header.innerText.trim().replace(/^link/, '');
+      const name = (header as HTMLElement).innerText.trim().replace(/^link/, '');
       const {top} = header.getBoundingClientRect();
       links.push({
         name,

src/app/shared/theme-picker/theme-picker.ts

@@ -1,13 +1,13 @@
 import {
-  Component,
-  ViewEncapsulation,
   ChangeDetectionStrategy,
+  Component,
   NgModule,
-  OnInit,
   OnDestroy,
+  OnInit,
+  ViewEncapsulation,
 } from '@angular/core';
 import {StyleManager} from '../style-manager';
-import {ThemeStorage, DocsSiteTheme} from './theme-storage/theme-storage';
+import {DocsSiteTheme, ThemeStorage} from './theme-storage/theme-storage';
 import {MatButtonModule} from '@angular/material/button';
 import {MatGridListModule} from '@angular/material/grid-list';
 import {MatIconModule} from '@angular/material/icon';
@@ -16,8 +16,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {CommonModule} from '@angular/common';
 import {ActivatedRoute, ParamMap} from '@angular/router';
 import {Subscription} from 'rxjs';
-import {map, filter} from 'rxjs/operators';
-
+import {map} from 'rxjs/operators';
 
 @Component({
   selector: 'theme-picker',
@@ -71,8 +70,12 @@ export class ThemePicker implements OnInit, OnDestroy {
 
   ngOnInit() {
     this._queryParamSubscription = this._activatedRoute.queryParamMap
-      .pipe(map((params: ParamMap) => params.get('theme')), filter(Boolean))
-      .subscribe((themeName: string) => this.installTheme(themeName));
+      .pipe(map((params: ParamMap) => params.get('theme')))
+      .subscribe((themeName: string | null) => {
+        if (themeName) {
+          this.installTheme(themeName);
+        }
+    });
   }
 
   ngOnDestroy() {

tsconfig.json

@@ -22,13 +22,17 @@
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noFallthroughCasesInSwitch": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true
   },
   "exclude": [
-    "src/assets"
+    "src/assets",
+    "dist"
   ],
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictTemplates": true
   }
 }