chore(workbench): compile with TypeScript strict checks enabled

closes #246

package.json

@@ -68,9 +68,9 @@
     "@angular/platform-browser": "11.0.0",
     "@angular/platform-browser-dynamic": "11.0.0",
     "@angular/router": "11.0.0",
-    "@scion/microfrontend-platform": "1.0.0-beta.13",
-    "@scion/toolkit": "11.0.0-beta.10",
-    "@scion/toolkit.internal": "11.0.0-beta.10",
+    "@scion/microfrontend-platform": "1.0.0-beta.15",
+    "@scion/toolkit": "11.0.0-beta.11",
+    "@scion/toolkit.internal": "11.0.0-beta.11",
     "rxjs": "6.6.0",
     "tslib": "2.0.0",
     "zone.js": "0.10.3"

projects/scion/workbench/src/lib/activity-part/activity-part.component.ts

@@ -53,10 +53,10 @@ export class ActivityPartComponent {
   private _panelWidth$ = new Subject<number>();
 
   @ViewChild('viewport')
-  public viewport: ElementRef;
+  public viewport!: ElementRef;
 
   @ViewChild('panel', {read: ElementRef})
-  private _panelElementRef: ElementRef;
+  private _panelElementRef!: ElementRef;
 
   constructor(public host: ElementRef<HTMLElement>,
               public activityPartService: WorkbenchActivityPartService,
@@ -69,7 +69,7 @@ export class ActivityPartComponent {
     return this.activityPartService.activities.filter(it => it.visible);
   }
 
-  public get activeActivity(): Activity {
+  public get activeActivity(): Activity | null {
     const activeActivity = this.activityPartService.activeActivity;
     return activeActivity && activeActivity.visible ? activeActivity : null;
   }

projects/scion/workbench/src/lib/activity-part/activity.ts

@@ -14,43 +14,43 @@ export abstract class Activity {
   /**
    * Specifies the title of the activity.
    */
-  public title: string;
+  public title?: string;
 
   /**
    * Specifies CSS class(es) added to the activity item and activity panel, e.g. used for e2e testing.
    */
-  public cssClass: string | string[];
+  public cssClass?: string | string[];
 
   /**
    * Specifies the text for the activity item.
    *
    * You can use it in combination with `itemCssClass`, e.g. to render an icon glyph by using its textual name.
    */
-  public itemText: string;
+  public itemText?: string;
 
   /**
    * Specifies CSS class(es) added to the activity item, e.g. used for e2e testing or to set an icon font class.
    */
-  public itemCssClass: string | string[];
+  public itemCssClass?: string | string[];
   /**
    * Controls whether to open this activity in the activity panel or to open it in a separate view.
    */
-  public target: 'activity-panel' | 'view';
+  public target?: 'activity-panel' | 'view';
 
   /**
    * Controls whether to show or hide this activity. By default, this activity is showing.
    */
-  public visible: boolean;
+  public visible?: boolean;
 
   /**
    * Specifies where to insert this activity in the list of activities.
    */
-  public position: number;
+  public position?: number;
 
   /**
    * Specifies the number of pixels added to the activity panel width if this is the active activity.
    */
-  public panelWidthDelta: number;
+  public panelWidthDelta?: number;
 
   /**
    * Specifies the routing commands used by Angular router to navigate when this activity is activated.
@@ -66,7 +66,7 @@ export abstract class Activity {
   /**
    * Returns the routing path of this activity.
    */
-  public abstract get path(): string;
+  public abstract get path(): string | undefined;
 
   /**
    * Emits upon activation change of this activity.
@@ -95,19 +95,19 @@ export class InternalActivity implements Activity {
 
   private _commands: any[] = [];
   private _actions: ActivityAction[] = [];
-  private _path: string;
+  private _path: string | undefined;
   private _active$ = new BehaviorSubject<boolean>(false);
 
   public panelWidthDelta = 0;
-  public title: string;
-  public cssClass: string | string[];
+  public title?: string;
+  public cssClass?: string | string[];
 
-  public itemText: string;
-  public itemCssClass: string | string[];
+  public itemText?: string;
+  public itemCssClass?: string | string[];
 
   public target: 'activity-panel' | 'view' = 'activity-panel';
   public visible = true;
-  public position: number;
+  public position?: number;
 
   constructor(private _wbRouter: WorkbenchRouter, private _injector: Injector) {
   }
@@ -125,7 +125,7 @@ export class InternalActivity implements Activity {
     return this._commands;
   }
 
-  public get path(): string {
+  public get path(): string | undefined {
     return this._path;
   }
 

projects/scion/workbench/src/lib/activity-part/wb-activity-action.directive.ts

@@ -34,7 +34,7 @@ import { Disposable } from '../disposable';
 })
 export class WbActivityActionDirective implements OnDestroy {
 
-  private readonly _activity: Activity;
+  private readonly _activity: Activity | null;
   private readonly _action: Disposable;
 
   constructor(private _template: TemplateRef<void>,

projects/scion/workbench/src/lib/activity-part/workbench-activity-part.service.ts

@@ -89,8 +89,8 @@ export class WorkbenchActivityPartService {
   /**
    * Returns the activity of the current routing context, or `null` if not in the routing context of an activity.
    */
-  public getActivityFromRoutingContext(route: ActivatedRouteSnapshot): Activity {
-    for (let testee = route; testee !== null; testee = testee.parent) {
+  public getActivityFromRoutingContext(route: ActivatedRouteSnapshot): Activity | null {
+    for (let testee: ActivatedRouteSnapshot | null = route; testee !== null; testee = testee.parent) {
       const activity = testee.data[ACTIVITY_DATA_KEY];
       if (activity) {
         return activity;

projects/scion/workbench/src/lib/broadcast-channel.service.ts

@@ -33,7 +33,7 @@ export class BroadcastChannelService {
         filter(event => event.storageArea === localStorage),
         filter(event => event.key === BROADCAST_CHANNEL_ITEM_KEY),
         filter(event => event.newValue !== null), // skip item remove events
-        map(event => JSON.parse(event.newValue)),
+        map(event => JSON.parse(event.newValue!)),
       );
   }
 

projects/scion/workbench/src/lib/content-projection/content-as-overlay.component.ts

@@ -54,5 +54,5 @@ export class ContentAsOverlayComponent {
    * Reference to the view container where to insert the overlay.
    */
   @Input()
-  public overlayHost: ViewContainerRef | Promise<ViewContainerRef>;
+  public overlayHost!: ViewContainerRef | Promise<ViewContainerRef>;
 }

projects/scion/workbench/src/lib/content-projection/content-projection.directive.ts

@@ -24,19 +24,19 @@ export class ContentProjectionDirective implements OnInit, OnDestroy {
   private _destroy$ = new Subject<void>();
 
   private _boundingBoxElement: HTMLElement;
-  private _contentViewRef: EmbeddedViewRef<any>;
+  private _contentViewRef!: EmbeddedViewRef<any>;
 
   /**
    * Reference to the view container where to insert the overlay.
    */
   @Input('wbContentProjectionOverlayHost') // tslint:disable-line:no-input-rename
-  public overlayHost: ViewContainerRef | Promise<ViewContainerRef>;
+  public overlayHost!: ViewContainerRef | Promise<ViewContainerRef>;
 
   /**
    * Template which to render as overlay. The template will stick to the bounding box of the host element of this directive.
    */
   @Input('wbContentProjectionContent') // tslint:disable-line:no-input-rename
-  public contentTemplateRef: TemplateRef<void>;
+  public contentTemplateRef!: TemplateRef<void>;
 
   constructor(host: ElementRef<HTMLElement>, @Optional() private _view: WorkbenchView) {
     this._boundingBoxElement = host.nativeElement;

projects/scion/workbench/src/lib/content-projection/view-container.reference.ts

@@ -16,7 +16,7 @@ import { Injectable, InjectionToken, ViewContainerRef } from '@angular/core';
 @Injectable()
 export class ViewContainerReference {
 
-  private _resolve: (host: ViewContainerRef) => void;
+  private _resolve: ((host: ViewContainerRef) => void) | null = null;
   private _promise = new Promise<ViewContainerRef>(resolve => this._resolve = resolve);
 
   /**

projects/scion/workbench/src/lib/dom.util.ts

@@ -21,7 +21,7 @@ export function createElement(tag: string, options: ElementCreateOptions): HTMLE
  */
 export function setStyle(element: HTMLElement | ElementRef<HTMLElement>, style: { [style: string]: any | null }): void {
   const target = coerceElement(element);
-  Object.keys(style).forEach(key => target.style[key] = style[key]);
+  Object.keys(style).forEach(key => target.style.setProperty(key, style[key]));
 }
 
 /**

projects/scion/workbench/src/lib/layout/parts-layout.component.ts

@@ -50,17 +50,17 @@ export class PartsLayoutComponent implements OnInit, OnDestroy {
 
   private _destroy$ = new Subject<void>();
 
-  public root: MTreeNode | MPart;
+  public root!: MTreeNode | MPart;
 
   /**
    * Reference to the root part of the layout. Is only set if the layout root is of the type {@link MPart}.
    */
-  public rootPart: WbComponentPortal<ViewPartComponent>;
+  public rootPart!: WbComponentPortal<ViewPartComponent> | null;
 
   /**
    * Reference to the root node of the layout. Is only set if the layout root is of the type {@link MTreeNode}.
    */
-  public rootNode: MTreeNode;
+  public rootNode!: MTreeNode | null;
 
   constructor(private _viewPartRegistry: WorkbenchViewPartRegistry,
               private _layoutService: WorkbenchLayoutService,
@@ -70,7 +70,7 @@ export class PartsLayoutComponent implements OnInit, OnDestroy {
   public ngOnInit(): void {
     this._layoutService.layout$
       .pipe(
-        startWith(null as PartsLayout), // start with a null layout to initialize the 'pairwise' operator, so it emits once the layout is set.
+        startWith(null! as PartsLayout), // start with a null layout to initialize the 'pairwise' operator, so it emits once the layout is set.
         pairwise(),
         takeUntil(this._destroy$),
       )
@@ -111,7 +111,7 @@ export class PartsLayoutComponent implements OnInit, OnDestroy {
     // Determine parts to be moved in the layout tree.
     const partPortalsToBeMoved: WbComponentPortal<ViewPartComponent>[] = prevLayout.parts.reduce((acc, prevPart) => {
       const prevPartPath = prevPart.getPath();
-      const newPartPath = newPartPaths.get(prevPart.partId);
+      const newPartPath = newPartPaths.get(prevPart.partId)!;
 
       if (!Arrays.isEqual(newPartPath, prevPartPath)) {
         return acc.concat(this._viewPartRegistry.getElseThrow(prevPart.partId).portal);

projects/scion/workbench/src/lib/layout/parts-layout.model.ts

@@ -30,11 +30,11 @@ export interface MPartsLayout {
  */
 export class MTreeNode {
 
-  public nodeId: string;
-  public child1: MTreeNode | MPart;
-  public child2: MTreeNode | MPart;
-  public ratio: number;
-  public direction: 'column' | 'row';
+  public nodeId!: string;
+  public child1!: MTreeNode | MPart;
+  public child2!: MTreeNode | MPart;
+  public ratio!: number;
+  public direction!: 'column' | 'row';
   public parent?: MTreeNode;
 
   constructor(treeNode: Partial<MTreeNode>) {
@@ -61,10 +61,10 @@ export class MTreeNode {
  */
 export class MPart {
 
-  public partId: string;
+  public partId!: string;
   public parent?: MTreeNode;
   public viewIds: string[] = [];
-  public activeViewId: string;
+  public activeViewId?: string;
 
   constructor(part: Partial<MPart>) {
     part.parent && assertType(part.parent, {toBeOneOf: MTreeNode}); // check the type to ensure that it is not an object literal
@@ -76,7 +76,7 @@ export class MPart {
    */
   public getPath(): string[] {
     const path: string[] = [];
-    let parent: MTreeNode = this.parent;
+    let parent: MTreeNode | undefined = this.parent;
     while (parent) {
       path.push(parent.nodeId);
       parent = parent.parent;