refactor(dev-app): enable Ivy and fix template type checking issues

.bazelrc

@@ -42,7 +42,7 @@ build:release --workspace_status_command="node ./tools/bazel-stamp-vars.js"
 
 # Use the legacy AOT compiler strategy. We don't want to compile with Ivy nor with "ngtsc" which
 # does not generate factory files which are needed for AOT.
-build --define=compile=legacy
+build --define=compile=aot
 
 #######################
 # Remote HTTP Caching #

package.json

@@ -13,7 +13,7 @@
     "yarn": ">= 1.17.3"
   },
   "scripts": {
-    "postinstall": "node --preserve-symlinks --preserve-symlinks-main tools/bazel/postinstall-patches.js",
+    "postinstall": "node --preserve-symlinks --preserve-symlinks-main tools/bazel/postinstall-patches.js | ivy-ngcc --properties es2015 --create-ivy-entry-points",
     "build": "bash ./scripts/build-packages-dist.sh",
     "bazel:buildifier": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,output-group,package-name,package-on-top,redefined-variable,repository-name,same-origin-load,string-iteration,unused-variable,unsorted-dict-items,out-of-order-load",
     "bazel:format-lint": "yarn -s bazel:buildifier --lint=warn --mode=check",
@@ -51,12 +51,12 @@
     "@types/googlemaps": "^3.37.0",
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
-    "core-js": "^2.6.1",
+    "core-js": "^2.6.9",
     "material-components-web": "^4.0.0-canary.e851d4f40.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tsickle": "^0.35.0",
-    "tslib": "^1.9.3",
+    "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
@@ -98,11 +98,11 @@
     "browser-sync": "^2.26.7",
     "chalk": "^2.4.2",
     "clang-format": "^1.2.4",
-    "codelyzer": "^5.1.1",
+    "codelyzer": "^5.1.2",
     "conventional-changelog": "^3.0.5",
     "dgeni": "^0.4.11",
     "dgeni-packages": "^0.27.1",
-    "firebase-tools": "^4.1.0",
+    "firebase-tools": "^7.5.0",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",
     "gulp": "^3.9.1",
@@ -151,7 +151,7 @@
     "ts-api-guardian": "^0.4.6",
     "ts-node": "^3.0.4",
     "tsconfig-paths": "^2.3.0",
-    "tslint": "^5.19.0",
+    "tslint": "^5.20.0",
     "tsutils": "^3.0.0",
     "typescript": "3.5.3",
     "uglify-js": "^2.8.14"

src/cdk/stepper/stepper.ts

@@ -124,7 +124,8 @@ export class CdkStep implements OnChanges {
   @ViewChild(TemplateRef, {static: true}) content: TemplateRef<any>;
 
   /** The top level abstract control of the step. */
-  @Input() stepControl: FormControlLike;
+  // TODO figure out how to support FormGroup here
+  @Input() stepControl: FormControlLike | any;
 
   /** Whether user has seen the expanded step content or not. */
   interacted = false;

src/dev-app/badge/badge-demo.html

@@ -6,7 +6,7 @@ <h3>Text</h3>
       Hello
     </span>
 
-    <span [matBadge]="11111" matBadgeOverlap="false">
+    <span matBadge="11111" matBadgeOverlap="false">
       Hello
     </span>
 

src/dev-app/checkbox/checkbox-demo.ts

@@ -9,6 +9,7 @@
 import {Component, Directive} from '@angular/core';
 import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+import {ThemePalette} from '@angular/material/core';
 
 
 export interface Task {
@@ -46,7 +47,7 @@ export class AnimationsNoop {
       margin-bottom: 4px;
     }
   `],
-  templateUrl: 'nested-checklist.html',
+  templateUrl: './nested-checklist.html',
 })
 export class MatCheckboxDemoNestedChecklist {
   tasks: Task[] = [
@@ -76,12 +77,18 @@ export class MatCheckboxDemoNestedChecklist {
     return task.completed || (subtasks != null && subtasks.every(t => t.completed));
   }
 
-  someComplete(tasks: Task[]): boolean {
+  someComplete(tasks: Task[] | undefined | null): boolean {
+    if (tasks === undefined || tasks === null) {
+      return false;
+    }
     const numComplete = tasks.filter(t => t.completed).length;
     return numComplete > 0 && numComplete < tasks.length;
   }
 
-  setAllCompleted(tasks: Task[], completed: boolean) {
+  setAllCompleted(tasks: Task[] | undefined | null, completed: boolean): void {
+    if (tasks === undefined || tasks === null) {
+      return;
+    }
     tasks.forEach(t => t.completed = completed);
   }
 }
@@ -96,20 +103,20 @@ export class CheckboxDemo {
   isIndeterminate: boolean = false;
   isChecked: boolean = false;
   isDisabled: boolean = false;
-  labelPosition: string = 'after';
+  labelPosition: 'after' | 'before' = 'after';
   useAlternativeColor: boolean = false;
 
   demoRequired = false;
   demoLabelAfter = false;
   demoChecked = false;
   demoDisabled = false;
   demoIndeterminate = false;
-  demoLabel = null;
+  demoLabel = '';
   demoLabelledBy = null;
-  demoId = null;
-  demoName = null;
-  demoValue = null;
-  demoColor = 'primary';
+  demoId = '';
+  demoName = '';
+  demoValue = '';
+  demoColor: ThemePalette = 'primary';
   demoDisableRipple = false;
   demoHideLabel = false;
 

src/dev-app/chips/chips-demo.ts

@@ -30,7 +30,7 @@ export interface DemoColor {
 export class ChipsDemo {
   tabIndex = 0;
   visible = true;
-  color = '';
+  color: ThemePalette = undefined;
   selectable = true;
   removable = true;
   addOnBlur = true;

src/dev-app/connected-overlay/connected-overlay-demo.html

@@ -97,7 +97,7 @@ <h2>Options</h2>
   <button mat-raised-button
       cdkOverlayOrigin
       type="button"
-      [disabled]="overlayRef"
+      [disabled]="!!overlayRef"
       (click)="openWithConfig()">Open</button>
 </div>
 

src/dev-app/datepicker/datepicker-demo.html

@@ -51,7 +51,7 @@ <h2>Result</h2>
            [(ngModel)]="date"
            [min]="minDate"
            [max]="maxDate"
-           [matDatepickerFilter]="filterOdd ? dateFilter : null"
+           [matDatepickerFilter]="filterOdd ? dateFilter : undefined"
            [disabled]="inputDisabled"
            (dateInput)="onDateInput($event)"
            (dateChange)="onDateChange($event)">
@@ -81,7 +81,7 @@ <h2>Result</h2>
          [min]="minDate"
          [max]="maxDate"
          [disabled]="inputDisabled"
-         [matDatepickerFilter]="filterOdd ? dateFilter : null"
+         [matDatepickerFilter]="filterOdd ? dateFilter : undefined"
          placeholder="Pick a date">
   <mat-datepicker-toggle [for]="resultPicker2"></mat-datepicker-toggle>
   <mat-datepicker
@@ -99,7 +99,7 @@ <h2>Input disabled datepicker</h2>
   <mat-form-field>
     <mat-label>Input disabled</mat-label>
     <input matInput [matDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
-           [matDatepickerFilter]="filterOdd ? dateFilter : null" disabled>
+           [matDatepickerFilter]="filterOdd ? dateFilter : undefined" disabled>
     <mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -111,7 +111,7 @@ <h2>Input disabled via FormControl</h2>
   <mat-form-field>
     <mat-label>FormControl disabled</mat-label>
     <input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined">
     <mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -127,7 +127,7 @@ <h2>Input disabled, datepicker popup enabled</h2>
   <mat-form-field>
     <mat-label>Input disabled, datepicker enabled</mat-label>
     <input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined">
     <mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -138,8 +138,9 @@ <h2>Datepicker with value property binding</h2>
   <mat-datepicker-toggle [for]="datePicker4"></mat-datepicker-toggle>
   <mat-form-field>
     <mat-label>Value binding</mat-label>
+    <!--  TODO Figure out how to get this value binding to work without using any  -->
     <input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : undefined">
     <mat-datepicker #datePicker4 [touchUi]="touch" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>

src/dev-app/datepicker/datepicker-demo.ts

@@ -42,22 +42,31 @@ export class DatepickerDemo {
   minDate: Date;
   maxDate: Date;
   startAt: Date;
-  date: Date;
+  date: any;
   lastDateInput: Date | null;
   lastDateChange: Date | null;
   color: ThemePalette;
 
   dateCtrl = new FormControl();
 
-  dateFilter =
-      (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)
+  dateFilter: (date: Date | null) => boolean =
+    (date: Date | null) => {
+      if (date === null) {
+        return true;
+      }
+      return !(date.getFullYear() % 2) && Boolean(date.getMonth() % 2) && !(date.getDate() % 2);
+    }
 
   onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
   onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;
 
   // pass custom header component type as input
   customHeader = CustomHeader;
   customHeaderNgContent = CustomHeaderNgContent;
+
+  constructor() {
+
+  }
 }
 
 // Custom header component for datepicker

src/dev-app/expansion/expansion-demo.ts

@@ -19,12 +19,12 @@ import {MatAccordion} from '@angular/material/expansion';
 export class ExpansionDemo {
   @ViewChild(MatAccordion, {static: false}) accordion: MatAccordion;
 
-  displayMode = 'default';
+  displayMode: 'default' | 'flat' = 'default';
   multi = false;
   hideToggle = false;
   disabled = false;
   showPanel3 = true;
-  togglePosition = 'after';
+  togglePosition: 'before' | 'after' = 'after';
   expandedHeight: string;
   collapsedHeight: string;
   events: string[] = [];

src/dev-app/grid-list/grid-list-demo.ts

@@ -35,7 +35,7 @@ export class GridListDemo {
   basicRowHeight = 80;
   fixedCols = 4;
   fixedRowHeight = 100;
-  ratioGutter = 1;
+  ratioGutter = '1';
   fitListHeight = '400px';
   ratio = '4:1';
 

src/dev-app/input/input-demo.html

@@ -363,6 +363,7 @@ <h4>Textarea</h4>
       <mat-form-field class="demo-text-align-end">
         <mat-label>Email address</mat-label>
         <input matInput #email value="angular-core">
+        <!-- TODO Figure out how to resolve "Property 'focused' does not exist on type 'HTMLInputElement'." -->
         <span matPrefix><mat-icon [class.primary]="email.focused">email</mat-icon>&nbsp;</span>
         <span matSuffix [class.primary]="email.focused">&nbsp;@gmail.com</span>
       </mat-form-field>
@@ -548,6 +549,7 @@ <h3>Regular &lt;textarea&gt; with maxRows and minRows</h3>
       <label>minRows<input type="number" #minRows class="demo-rows" (input)="1+1"></label> &nbsp;
       <label>maxRows<input type="number" #maxRows class="demo-rows" (input)="1+1"></label>
     </div>
+   <!-- TODO Figure out how to bind values from template variables minRows and maxRows -->
     <textarea class="demo-textarea"
         cdkTextareaAutosize
         [cdkAutosizeMinRows]="minRows.value"

src/dev-app/input/input-demo.ts

@@ -23,7 +23,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
   styleUrls: ['input-demo.css'],
 })
 export class InputDemo {
-  floatingLabel = 'auto';
+  floatingLabel: 'always' | 'never' | 'auto' = 'auto';
   color: boolean;
   requiredField: boolean;
   hideRequiredMarker: boolean;

src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts

@@ -9,6 +9,7 @@
 import {Component, Directive} from '@angular/core';
 import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+import {ThemePalette} from '@angular/material/core';
 
 
 export interface Task {
@@ -77,12 +78,18 @@ export class MatCheckboxDemoNestedChecklist {
     return task.completed || (subtasks != null && subtasks.every(t => t.completed));
   }
 
-  someComplete(tasks: Task[]): boolean {
+  someComplete(tasks: Task[] | undefined | null): boolean {
+    if (tasks === undefined || tasks === null) {
+      return false;
+    }
     const numComplete = tasks.filter(t => t.completed).length;
     return numComplete > 0 && numComplete < tasks.length;
   }
 
-  setAllCompleted(tasks: Task[], completed: boolean) {
+  setAllCompleted(tasks: Task[] | undefined | null, completed: boolean): void {
+    if (tasks === undefined || tasks === null) {
+      return;
+    }
     tasks.forEach(t => t.completed = completed);
   }
 }
@@ -97,20 +104,20 @@ export class MdcCheckboxDemo {
   isIndeterminate: boolean = false;
   isChecked: boolean = false;
   isDisabled: boolean = false;
-  labelPosition: string = 'after';
+  labelPosition: 'before' | 'after' = 'after';
   useAlternativeColor: boolean = false;
 
   demoRequired = false;
   demoLabelAfter = false;
   demoChecked = false;
   demoDisabled = false;
   demoIndeterminate = false;
-  demoLabel = null;
+  demoLabel = '';
   demoLabelledBy = null;
-  demoId = null;
-  demoName = null;
-  demoValue = null;
-  demoColor = 'primary';
+  demoId = '';
+  demoName = '';
+  demoValue = '';
+  demoColor: ThemePalette = 'primary';
   demoDisableRipple = false;
   demoHideLabel = false;
 

src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts

@@ -7,6 +7,7 @@
  */
 
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
 
 @Component({
   moduleId: module.id,
@@ -15,7 +16,7 @@ import {Component} from '@angular/core';
   styleUrls: ['mdc-progress-bar-demo.css'],
 })
 export class MdcProgressBarDemo {
-  color: string = 'primary';
+  color: ThemePalette = 'primary';
   determinateProgressValue: number = 30;
   determinateAnimationEndValue: number;
   bufferAnimationEndValue: number;

src/dev-app/progress-bar/progress-bar-demo.ts

@@ -7,6 +7,7 @@
  */
 
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
 
 
 // TODO(josephperrott): Add an automatically filling example progress bar.
@@ -18,7 +19,7 @@ import {Component} from '@angular/core';
   styleUrls: ['progress-bar-demo.css'],
 })
 export class ProgressBarDemo {
-  color: string = 'primary';
+  color: ThemePalette = 'primary';
   determinateProgressValue: number = 30;
   determinateAnimationEndValue: number;
   bufferAnimationEndValue: number;