build: enable strictPropertyInitialization

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-sidenav/component-sidenav.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 = 959;
   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-viewer/component-viewer.ts

@@ -36,11 +36,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);
@@ -78,12 +76,11 @@ export class ComponentViewer implements OnDestroy {
  */
 @Directive()
 export class ComponentBaseView implements OnInit, OnDestroy {
-  @ViewChild('toc') tableOfContents: TableOfContents;
-  @ViewChildren(DocViewer) viewers: QueryList<DocViewer>;
+  @ViewChild('toc') tableOfContents!: TableOfContents;
+  @ViewChildren(DocViewer) viewers!: QueryList<DocViewer>;
 
   showToc: Observable<boolean>;
-
-  destroyed = new Subject<void>();
+  private _destroyed = new Subject();
 
   constructor(
     public componentViewer: ComponentViewer,
@@ -99,15 +96,15 @@ export class ComponentBaseView implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.componentViewer.componentDocItem.pipe(takeUntil(this.destroyed)).subscribe(() => {
+    this.componentViewer.componentDocItem.pipe(takeUntil(this._destroyed)).subscribe(() => {
       if (this.tableOfContents) {
         this.tableOfContents.resetHeaders();
       }
     });
 
     this.showToc.pipe(
       skip(1),
-      takeUntil(this.destroyed)
+      takeUntil(this._destroyed)
     ).subscribe(() => {
       if (this.tableOfContents) {
         this.viewers.forEach(viewer => {
@@ -118,7 +115,8 @@ export class ComponentBaseView implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.destroyed.next();
+    this._destroyed.next();
+    this._destroyed.complete();
   }
 
   updateTableOfContents(sectionName: string, docViewerContent: HTMLElement, sectionIndex = 0) {

src/app/shared/carousel/carousel.spec.ts

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

src/app/shared/carousel/carousel.ts

@@ -36,20 +36,19 @@ export class CarouselItem implements FocusableOption {
   encapsulation: ViewEncapsulation.None
 })
 export class Carousel implements AfterContentInit {
-  @Input('aria-label') ariaLabel: string;
-  @Input() itemWidth: number;
-  @ContentChildren(CarouselItem) items: QueryList<CarouselItem>;
-  @ViewChild('contentWrapper') wrapper: ElementRef;
+  @Input('aria-label') ariaLabel: string | undefined;
+  @Input() itemWidth: number | undefined;
+  @ContentChildren(CarouselItem) items!: QueryList<CarouselItem>;
+  @ViewChild('contentWrapper') wrapper!: ElementRef;
   position = 0;
   showPrevArrow = false;
   showNextArrow = true;
-  visibleItems: number;
-  shiftWidth: number;
-  itemsArray: CarouselItem[];
-  private focusKeyManager: FocusKeyManager<CarouselItem>;
+  visibleItems: number | undefined;
+  shiftWidth: number | undefined;
+  itemsArray: CarouselItem[] | undefined;
+  private focusKeyManager: FocusKeyManager<CarouselItem> | undefined;
 
-  constructor(private readonly element: ElementRef) {
-  }
+  constructor(private readonly element: ElementRef) {}
 
   private _index = 0;
 
@@ -59,37 +58,44 @@ export class Carousel implements AfterContentInit {
 
   set index(i: number) {
     this._index = i;
+    let lastVisibleIndex = this.items.length;
+    if (this.visibleItems) {
+      lastVisibleIndex -= this.visibleItems;
+    }
+
     this.showPrevArrow = i > 0;
-    this.showNextArrow = i < (this.items.length - this.visibleItems);
+    this.showNextArrow = i < lastVisibleIndex;
   }
 
   onKeydown(event: KeyboardEvent) {
-    switch (event.key) {
-      case 'Tab':
-        if (!this.focusKeyManager.activeItem) {
-          this.focusKeyManager.setFirstItemActive();
+    if (this.focusKeyManager != null) {
+      switch (event.key) {
+        case 'Tab':
+          if (!this.focusKeyManager.activeItem) {
+            this.focusKeyManager.setFirstItemActive();
+            this._updateItemTabIndices();
+          }
+          break;
+
+        case 'ArrowLeft':
+          if (this.focusKeyManager.activeItemIndex === this.index) {
+            this.previous();
+          }
+          this.focusKeyManager.setPreviousItemActive();
           this._updateItemTabIndices();
-        }
-        break;
+          break;
 
-      case 'ArrowLeft':
-        if (this.focusKeyManager.activeItemIndex === this.index) {
-          this.previous();
-        }
-        this.focusKeyManager.setPreviousItemActive();
-        this._updateItemTabIndices();
-        break;
-
-      case 'ArrowRight':
-        if (this.focusKeyManager.activeItemIndex === this.index + this.visibleItems - 1) {
-          this.next();
-        }
-        this.focusKeyManager.setNextItemActive();
-        this._updateItemTabIndices();
-        break;
+        case 'ArrowRight':
+          if (this.focusKeyManager.activeItemIndex === this.index + (this.visibleItems || 0) - 1) {
+            this.next();
+          }
+          this.focusKeyManager.setNextItemActive();
+          this._updateItemTabIndices();
+          break;
 
-      default:
-        break;
+        default:
+          break;
+      }
     }
   }
 
@@ -103,7 +109,7 @@ export class Carousel implements AfterContentInit {
     // timeout to make sure clientWidth is defined
     setTimeout(() => {
       this.itemsArray = this.items.toArray();
-      this.shiftWidth = this.items.first.element.nativeElement.clientWidth;
+      this.shiftWidth = this.calculateShiftWidth(this.itemsArray);
       this._resizeCarousel();
     });
   }
@@ -122,35 +128,52 @@ export class Carousel implements AfterContentInit {
     }
   }
 
+  /**
+   * @param items array of carousel items
+   * @return width to shift the carousel
+   */
+  calculateShiftWidth(items: CarouselItem[]): number {
+    return items[0].element.nativeElement.clientWidth;
+  }
+
   private _updateItemTabIndices() {
     this.items.forEach((item: CarouselItem) => {
-      item.tabindex = item === this.focusKeyManager.activeItem ? '0' : '-1';
+      if (this.focusKeyManager != null) {
+        item.tabindex = item === this.focusKeyManager.activeItem ? '0' : '-1';
+      }
     });
   }
 
   private _shiftItems(shiftIndex: number) {
     this.index += shiftIndex;
-    this.position += shiftIndex * this.shiftWidth;
+    this.position += shiftIndex *
+      (this.shiftWidth || this.calculateShiftWidth(this.items.toArray()));
     this.items.forEach((item: CarouselItem) => {
       item.element.nativeElement.style.transform = `translateX(-${this.position}px)`;
     });
   }
 
   private _resizeCarousel() {
+    if (this.shiftWidth == null) {
+      this.shiftWidth = this.calculateShiftWidth(this.items.toArray());
+    }
     const newVisibleItems = Math.max(1, Math.min(
       Math.floor((this.element.nativeElement.offsetWidth) / this.shiftWidth),
       this.items.length));
     if (this.visibleItems !== newVisibleItems) {
-      if (this.visibleItems < newVisibleItems) {
-        const shiftIndex = this.index - (this.items.length - this.visibleItems) + 1;
+      if ((this.visibleItems || 0) < newVisibleItems) {
+        const lastVisibleIndex = this.items.length - (this.visibleItems || 0);
+        const shiftIndex = this.index - (lastVisibleIndex) + 1;
         if (shiftIndex > 0) {
           this._shiftItems(-shiftIndex);
         }
       } else {
-        if (this.focusKeyManager.activeItemIndex && this.focusKeyManager.activeItemIndex >
-          this.index + newVisibleItems - 1) {
-          this.focusKeyManager.setPreviousItemActive();
-          this._updateItemTabIndices();
+        if (this.focusKeyManager != null) {
+          if (this.focusKeyManager.activeItemIndex && this.focusKeyManager.activeItemIndex >
+            this.index + newVisibleItems - 1) {
+            this.focusKeyManager.setPreviousItemActive();
+            this._updateItemTabIndices();
+          }
         }
       }
       this.visibleItems = newVisibleItems;
@@ -159,4 +182,3 @@ export class Carousel implements AfterContentInit {
     this.wrapper.nativeElement.style.width = `${this.visibleItems * this.shiftWidth}px`;
   }
 }
-

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

@@ -26,9 +26,9 @@ import {HeaderLink} from './header-link';
 })
 export class DocViewer implements OnDestroy {
   private _portalHosts: DomPortalOutlet[] = [];
-  private _documentFetchSubscription: Subscription;
+  private _documentFetchSubscription: Subscription = new Subscription();
 
-  @Input() name: string;
+  @Input() name: string | undefined;
 
   /** The URL of the document to display. */
   @Input()

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

@@ -29,7 +29,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/code-snippet.ts

@@ -13,6 +13,6 @@ import {DocViewer} from '../doc-viewer/doc-viewer';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CodeSnippet {
-  @Input() source: string;
-  @ViewChild('viewer') viewer: DocViewer;
+  @Input() source: string | undefined;
+  @ViewChild('viewer') viewer!: DocViewer;
 }