build: enable strictPropertyInitialization

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

Author: Splaktar

.circleci/config.yml

@@ -24,7 +24,7 @@ var_4: &save_cache
   save_cache:
     key: *cache_key
     paths:
-    - "node_modules"
+    - "node_modules/"
 
 var_5: &yarn_install
   run:

package.json

@@ -26,7 +26,7 @@
     "publish-beta": "bash ./tools/deploy.sh stable beta",
     "test:audit:a11y": "node tools/audit-docs-a11y",
     "test:audit:a11y:localhost": "run-p --race \"~~light-server -s dist/material-angular-io -p 4200 --quiet\" \"test:audit:a11y http://localhost:4200\" --",
-    "test:audit:a11y:ci": "run-p --race \"~~light-server -s ../dist/material-angular-io -p 4200 --quiet\" \"test:audit:a11y http://localhost:4200\" --",
+    "test:audit:a11y:ci": "run-p --race \"~~light-server -s ../dist/material-angular-io -p 4200\" \"test:audit:a11y http://localhost:4200\" --",
     "test:audit": "node tools/audit-docs",
     "test:audit:localhost": "run-p --race \"start:static\" \"test:audit http://localhost:4200 2000\" --",
     "test:audit:ci": "run-p --race \"~~light-server -s ../dist/material-angular-io -p 4200 --quiet\" \"test:audit http://localhost:4200\" --",

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

@@ -1,23 +1,28 @@
+import {CommonModule} from '@angular/common';
 import {Component, NgModule, OnDestroy, OnInit} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
-import {CommonModule} from '@angular/common';
 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 {NavigationFocusModule} from '../../shared/navigation-focus/navigation-focus';
+import {combineLatest, Observable, Subscription} from 'rxjs';
 
+import {
+  DocumentationItems,
+  SECTIONS
+} from '../../shared/documentation-items/documentation-items';
+import {
+  NavigationFocusModule
+} from '../../shared/navigation-focus/navigation-focus';
+import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 @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;
+  routeParamSubscription: Subscription = new Subscription();
+  _categoryListSummary: string | undefined;
 
   constructor(public docItems: DocumentationItems,
               public _componentPageTitle: ComponentPageTitle,

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

@@ -1,3 +1,8 @@
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {CdkAccordionModule} from '@angular/cdk/accordion';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {CommonModule} from '@angular/common';
+import {HttpClientModule} from '@angular/common/http';
 import {
   Component,
   Input,
@@ -8,38 +13,42 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {FormsModule} from '@angular/forms';
 import {MatIconModule} from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
 import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
+import {MatDrawerToggleResult} from '@angular/material/sidenav/drawer';
 import {ActivatedRoute, Params, RouterModule, Routes} from '@angular/router';
-import {CommonModule} from '@angular/common';
-import {ComponentHeaderModule} from '../component-page-header/component-page-header';
-import {FooterModule} from '../../shared/footer/footer';
 import {combineLatest, Observable, Subscription} from 'rxjs';
 import {map} from 'rxjs/operators';
-import {animate, state, style, transition, trigger} from '@angular/animations';
-import {CdkAccordionModule} from '@angular/cdk/accordion';
-import {BreakpointObserver} from '@angular/cdk/layout';
+
+import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
+import {
+  DocumentationItems
+} from '../../shared/documentation-items/documentation-items';
+import {FooterModule} from '../../shared/footer/footer';
+import {
+  NavigationFocusModule
+} from '../../shared/navigation-focus/navigation-focus';
+import {
+  NavigationFocusService
+} from '../../shared/navigation-focus/navigation-focus.service';
+import {StackBlitzButtonModule} from '../../shared/stack-blitz';
+import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {
   ComponentCategoryList,
   ComponentCategoryListModule
 } from '../component-category-list/component-category-list';
+import {
+  ComponentHeaderModule
+} from '../component-page-header/component-page-header';
 import {
   ComponentApi,
   ComponentExamples,
   ComponentOverview,
   ComponentViewer,
   ComponentViewerModule
 } from '../component-viewer/component-viewer';
-import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
-import {FormsModule} from '@angular/forms';
-import {HttpClientModule} from '@angular/common/http';
-import {StackBlitzButtonModule} from '../../shared/stack-blitz';
-import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
-import {MatDrawerToggleResult} from '@angular/material/sidenav/drawer';
-import {MatListModule} from '@angular/material/list';
-import {NavigationFocusModule} from '../../shared/navigation-focus/navigation-focus';
-import {NavigationFocusService} from '../../shared/navigation-focus/navigation-focus.service';
 
 // These constants are used by the ComponentSidenav for orchestrating the MatSidenav in a responsive
 // way. This includes hiding the sidenav, defaulting it to open, changing the mode from over to
@@ -58,8 +67,8 @@ const SMALL_WIDTH_BREAKPOINT = 939;
   encapsulation: ViewEncapsulation.None,
 })
 export class ComponentSidenav implements OnInit, OnDestroy {
-  @ViewChild(MatSidenav) sidenav: MatSidenav;
-  params: Observable<Params>;
+  @ViewChild(MatSidenav) sidenav!: MatSidenav;
+  params: Observable<Params> | undefined;
   isExtraScreenSmall: Observable<boolean>;
   isScreenSmall: Observable<boolean>;
   private subscriptions = new Subscription();
@@ -112,8 +121,8 @@ export class ComponentSidenav implements OnInit, OnDestroy {
   ],
 })
 export class ComponentNav {
-  @Input() params: Observable<Params>;
-  currentItemId: string;
+  @Input() params: Observable<Params> | undefined;
+  currentItemId: string | undefined;
 
   constructor(public docItems: DocumentationItems) {}
 }

src/app/pages/component-sidenav/component-sidenav.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) {
     const routeAndParentParams = [_route.params];
     if (_route.parent) {
       routeAndParentParams.push(_route.parent.params);
@@ -73,27 +71,27 @@ export class ComponentViewer implements OnDestroy {
  */
 @Directive()
 export class ComponentBaseView implements OnInit, OnDestroy {
-  @ViewChild('toc') tableOfContents: TableOfContents;
+  @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(() => {
       if (this.tableOfContents) {
         this.tableOfContents.resetHeaders();
       }
     });
   }
 
   ngOnDestroy() {
-    this.destroyed.next();
+    this._destroyed.next();
+    this._destroyed.complete();
   }
 
   updateTableOfContents(sectionName: string, docViewerContent: HTMLElement, sectionIndex = 0) {

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

@@ -99,6 +99,5 @@ describe('HorizontalCarousel', () => {
 })
 class CarouselTestComponent {
   numberOfItems = 6;
-  @ViewChild(Carousel) carousel: Carousel;
+  @ViewChild(Carousel) carousel!: Carousel;
 }
-