build: enable strictPropertyInitialization

- fix related build errors
- complete `this._destroyed` in `ngOnDestroy()`
- replace use of deprecated `DomPortalHost` with `DomPortalOutlet`

Author: Splaktar

src/app/pages/component-category-list/component-category-list.ts

@@ -5,18 +5,18 @@ import {ActivatedRoute, Params, RouterModule} from '@angular/router';
 import {DocumentationItems, SECTIONS} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
-import {Observable, combineLatest, Subscription} from 'rxjs';
-
+import {combineLatest, Observable, Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 
 @Component({
   selector: 'app-component-category-list',
   templateUrl: './component-category-list.html',
   styleUrls: ['./component-category-list.scss']
 })
 export class ComponentCategoryList implements OnInit, OnDestroy {
-  params: Observable<Params>;
-  routeParamSubscription: Subscription;
-  _categoryListSummary: string;
+  params: Observable<Params> | undefined;
+  private _destroyed = new Subject();
+  _categoryListSummary: string | undefined;
 
   constructor(public docItems: DocumentationItems,
               public _componentPageTitle: ComponentPageTitle,
@@ -29,7 +29,7 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
       Object.assign);
 
     // title on topbar navigation
-    this.routeParamSubscription = this.params.subscribe(params => {
+    this.params.pipe(takeUntil(this._destroyed)).subscribe(params => {
       const sectionName = params['section'];
       const section = SECTIONS[sectionName];
       this._componentPageTitle.title = section.name;
@@ -38,7 +38,8 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.routeParamSubscription.unsubscribe();
+    this._destroyed.next();
+    this._destroyed.complete();
   }
 }
 

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

@@ -17,7 +17,7 @@ import {combineLatest} from 'rxjs';
 })
 export class ComponentList {
   category: DocCategory | undefined;
-  section: string;
+  section: string | undefined;
 
   constructor(public docItems: DocumentationItems,
               private _componentPageTitle: ComponentPageTitle,

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

@@ -1,5 +1,14 @@
 import {
-  Component, Input, NgZone, ViewEncapsulation, ViewChild, OnInit, NgModule, OnDestroy
+  Component,
+  Input,
+  NgModule,
+  NgZone,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {MatIconModule} from '@angular/material/icon';
@@ -9,9 +18,9 @@ import {ActivatedRoute, Params, Router, RouterModule} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {ComponentHeaderModule} from '../component-page-header/component-page-header';
 import {FooterModule} from '../../shared/footer/footer';
-import {Observable, Subject, combineLatest} from 'rxjs';
-import {switchMap, takeUntil, startWith, map} from 'rxjs/operators';
-import {trigger, animate, state, style, transition} from '@angular/animations';
+import {combineLatest, Observable, Subject} from 'rxjs';
+import {map, takeUntil} from 'rxjs/operators';
+import {animate, state, style, transition, trigger} from '@angular/animations';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {BreakpointObserver} from '@angular/cdk/layout';
 
@@ -24,8 +33,8 @@ const SMALL_WIDTH_BREAKPOINT = 720;
   encapsulation: ViewEncapsulation.None,
 })
 export class ComponentSidenav implements OnInit {
-  @ViewChild(MatSidenav) sidenav: MatSidenav;
-  params: Observable<Params>;
+  @ViewChild(MatSidenav) sidenav!: MatSidenav;
+  params: Observable<Params> | undefined;
   isScreenSmall: Observable<boolean>;
 
   constructor(public docItems: DocumentationItems,
@@ -55,26 +64,35 @@ export class ComponentSidenav implements OnInit {
     ]),
   ],
 })
-export class ComponentNav implements OnInit, OnDestroy {
-
-  @Input() params: Observable<Params>;
+export class ComponentNav implements OnInit, OnDestroy, OnChanges {
+  @Input() params: Observable<Params> | undefined;
   expansions: {[key: string]: boolean} = {};
-  private _onDestroy = new Subject<void>();
+  private _destroyed = new Subject();
 
-  constructor(public docItems: DocumentationItems,
-              private _router: Router) { }
+  constructor(public docItems: DocumentationItems, private _router: Router) {}
 
   ngOnInit() {
-    this._router.events.pipe(
-      startWith(null),
-      switchMap(() => this.params),
-      takeUntil(this._onDestroy)
-    ).subscribe(p => this.setExpansions(p));
+    if (this.params) {
+      this.subscribeToParamChanges(this.params);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.params && changes.params.currentValue &&
+        (changes.params.currentValue != changes.params.previousValue)) {
+      this.subscribeToParamChanges(
+          (changes.params.currentValue as Observable<Params>));
+    }
+  }
+
+  subscribeToParamChanges(newParams: Observable<Params>) {
+    newParams.pipe(takeUntil(this._destroyed))
+        .subscribe(params => this.setExpansions(params));
   }
 
   ngOnDestroy() {
-    this._onDestroy.next();
-    this._onDestroy.complete();
+    this._destroyed.next();
+    this._destroyed.complete();
   }
 
   /** Set the expansions based on the route url */
@@ -113,7 +131,6 @@ export class ComponentNav implements OnInit, OnDestroy {
   getExpanded(category: string): boolean {
     return this.expansions[category] === undefined ? true : this.expansions[category];
   }
-
 }
 
 

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

@@ -31,11 +31,9 @@ export class ComponentViewer implements OnDestroy {
   sections: Set<string> = new Set(['overview', 'api']);
   private _destroyed = new Subject();
 
-  constructor(_route: ActivatedRoute,
-              private router: Router,
+  constructor(_route: ActivatedRoute, private router: Router,
               public _componentPageTitle: ComponentPageTitle,
-              public docItems: DocumentationItems,
-              ) {
+              public docItems: DocumentationItems) {
     let routeAndParentParams = [_route.params];
     if (_route.parent) {
       routeAndParentParams.push(_route.parent.params);
@@ -73,20 +71,18 @@ export class ComponentViewer implements OnDestroy {
  */
 @Directive()
 export class ComponentBaseView implements OnInit, OnDestroy {
-  @ViewChild('initialFocusTarget') focusTarget: ElementRef;
-  @ViewChild('toc') tableOfContents: TableOfContents;
-
+  @ViewChild('initialFocusTarget') focusTarget!: ElementRef;
+  @ViewChild('toc') tableOfContents!: TableOfContents;
   showToc: Observable<boolean>;
-
-  destroyed = new Subject<void>();
+  private _destroyed = new Subject();
 
   constructor(public componentViewer: ComponentViewer, breakpointObserver: BreakpointObserver) {
     this.showToc = breakpointObserver.observe('(max-width: 1200px)')
       .pipe(map(result => !result.matches));
   }
 
   ngOnInit() {
-    this.componentViewer.componentDocItem.pipe(takeUntil(this.destroyed)).subscribe(() => {
+    this.componentViewer.componentDocItem.pipe(takeUntil(this._destroyed)).subscribe(() => {
       // 100ms timeout is used to allow the page to settle before moving focus for screen readers.
       setTimeout(() => this.focusTarget.nativeElement.focus({preventScroll: true}), 100);
       if (this.tableOfContents) {
@@ -96,7 +92,8 @@ export class ComponentBaseView implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.destroyed.next();
+    this._destroyed.next();
+    this._destroyed.complete();
   }
 
   updateTableOfContents(sectionName: string, docViewerContent: HTMLElement) {

src/app/shared/copier/copier.service.ts

@@ -11,7 +11,7 @@ import {Injectable} from '@angular/core';
 @Injectable()
 export class CopierService {
 
-  private textarea: HTMLTextAreaElement;
+  private textarea: HTMLTextAreaElement | undefined;
 
   /** Copy the text value to the clipboard. */
   copyText(text: string): boolean {

src/app/shared/doc-viewer/doc-viewer-module.ts

@@ -1,6 +1,6 @@
 import {DocViewer} from './doc-viewer';
 import {ExampleViewer} from '../example-viewer/example-viewer';
-import {StackBlitzButtonModule} from '../stack-blitz/stack-blitz-button';
+import {StackBlitzButtonModule} from '../stack-blitz';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatSnackBarModule} from '@angular/material/snack-bar';

src/app/shared/doc-viewer/doc-viewer.ts

@@ -1,4 +1,4 @@
-import {ComponentPortal, DomPortalHost} from '@angular/cdk/portal';
+import {ComponentPortal, DomPortalOutlet} from '@angular/cdk/portal';
 import {HttpClient, HttpErrorResponse} from '@angular/common/http';
 import {DomSanitizer} from '@angular/platform-browser';
 import {
@@ -25,10 +25,9 @@ import {HeaderLink} from './header-link';
   template: 'Loading document...',
 })
 export class DocViewer implements OnDestroy {
-  private _portalHosts: DomPortalHost[] = [];
-  private _documentFetchSubscription: Subscription;
-
-  @Input() name: string;
+  private _portalHosts: DomPortalOutlet[] = [];
+  private _documentFetchSubscription!: Subscription;
+  @Input() name: string | undefined;
 
   /** The URL of the document to display. */
   @Input()
@@ -107,7 +106,7 @@ export class DocViewer implements OnDestroy {
 
     Array.prototype.slice.call(exampleElements).forEach((element: Element) => {
       let example = element.getAttribute(componentName);
-      let portalHost = new DomPortalHost(
+      let portalHost = new DomPortalOutlet(
           element, this._componentFactoryResolver, this._appRef, this._injector);
       let examplePortal = new ComponentPortal(componentClass, this._viewContainerRef);
       let exampleViewer = portalHost.attach(examplePortal);

src/app/shared/doc-viewer/header-link.ts

@@ -33,7 +33,7 @@ export class HeaderLink {
    * Id of the anchor element. Note that is uses "example" because we instantiate the
    * header link components through the ComponentPortal.
    */
-  @Input() example: string;
+  @Input() example: string | undefined;
 
   /** Base URL that is used to build an absolute fragment URL. */
   private _baseUrl: string;

src/app/shared/example-viewer/example-viewer.html

@@ -5,27 +5,31 @@
     <button mat-icon-button type="button" (click)="toggleSourceView()"
             [matTooltip]="'View source'">
       <mat-icon>
-        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
+        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
+             fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
           <path fill="none" d="M0 0h24v24H0V0z"></path>
-          <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
+          <path
+            d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z">
+          </path>
         </svg>
       </mat-icon>
     </button>
 
-  <stack-blitz-button [example]="example"></stack-blitz-button>
-</div>
+    <stack-blitz-button [example]="example"></stack-blitz-button>
+  </div>
 
   <div class="docs-example-viewer-source" *ngIf="showSource">
-    <mat-tab-group>
+    <mat-tab-group *ngIf="exampleTabs">
       <mat-tab *ngFor="let tabName of _getExampleTabNames()" [label]="tabName">
         <div class="docs-example-source-wrapper">
           <button mat-icon-button type="button" class="docs-example-source-copy"
                   title="Copy example source" aria-label="Copy example source to clipboard"
                   (click)="copySource(viewer.textContent)">
             <mat-icon>content_copy</mat-icon>
           </button>
-          <pre class="docs-example-source"><doc-viewer
-              #viewer [documentUrl]="exampleTabs[tabName]"></doc-viewer></pre>
+          <pre class="docs-example-source">
+            <doc-viewer #viewer [documentUrl]="exampleTabs[tabName]"></doc-viewer>
+          </pre>
         </div>
       </mat-tab>
     </mat-tab-group>

src/app/shared/example-viewer/example-viewer.spec.ts

@@ -78,7 +78,7 @@ describe('ExampleViewer', () => {
 
     extensions.forEach(extension => {
       const expected = `${basePath}${exampleKey}-example-${extension}.html`;
-      const actual = component.exampleTabs[extension.toUpperCase()];
+      const actual = component.exampleTabs![extension.toUpperCase()];
 
       expect(actual).toEqual(expected);
     });

src/app/shared/example-viewer/example-viewer.ts

@@ -15,21 +15,21 @@ const fileExtensionRegex = /(.*)\.(\w+)/;
 })
 export class ExampleViewer {
   /** Component portal for the currently displayed example. */
-  selectedPortal: ComponentPortal<any>;
+  selectedPortal: ComponentPortal<any> | undefined;
 
   /** Map of example files that should be displayed in the view-source tab. */
-  exampleTabs: {[tabName: string]: string};
+  exampleTabs: {[tabName: string]: string} | undefined;
 
   /** Data for the currently selected example. */
-  exampleData: LiveExample;
+  exampleData: LiveExample | undefined;
 
   /** Whether the source for the example is being displayed. */
   showSource = false;
 
   /** String key of the currently displayed example. */
   @Input()
   get example() { return this._example; }
-  set example(exampleName: string) {
+  set example(exampleName: string | undefined) {
     if (exampleName && EXAMPLE_COMPONENTS[exampleName]) {
       this._example = exampleName;
       this.exampleData = EXAMPLE_COMPONENTS[exampleName];
@@ -39,7 +39,7 @@ export class ExampleViewer {
       console.error(`Could not find example: ${exampleName}`);
     }
   }
-  private _example: string;
+  private _example: string | undefined;
 
   constructor(private snackbar: MatSnackBar, private copier: CopierService) {}
 
@@ -55,8 +55,8 @@ export class ExampleViewer {
     }
   }
 
-  _getExampleTabNames() {
-    return Object.keys(this.exampleTabs);
+  _getExampleTabNames(): string[] {
+    return this.exampleTabs ? Object.keys(this.exampleTabs) : [];
   }
 
   private resolveHighlightedExampleFile(fileName: string) {
@@ -70,13 +70,17 @@ export class ExampleViewer {
       CSS: this.resolveHighlightedExampleFile(`${this.example}-example-css.html`),
     };
 
-    const additionalFiles = this.exampleData.additionalFiles || [];
+    const additionalFiles = this.exampleData && this.exampleData.additionalFiles
+                                ? this.exampleData.additionalFiles
+                                : [];
 
     additionalFiles.forEach(fileName => {
       // Since the additional files refer to the original file name, we need to transform
       // the file name to match the highlighted HTML file that displays the source.
       const fileSourceName = fileName.replace(fileExtensionRegex, '$1-$2.html');
-      this.exampleTabs[fileName] = this.resolveHighlightedExampleFile(fileSourceName);
+      if (this.exampleTabs) {
+        this.exampleTabs[fileName] = this.resolveHighlightedExampleFile(fileSourceName);
+      }
     });
   }
 }

src/app/shared/ga/ga.ts

@@ -10,7 +10,7 @@ import {environment} from '../../../environments/environment';
  */
 export class GaService {
 
-  private previousUrl: string;
+  private previousUrl: string | undefined;
 
   constructor() {
     this.ga('create', environment['matGaId'] , 'auto', 'mat');