build: ensure components can be built with ivy strict template type checking

.circleci/config.yml

@@ -404,10 +404,6 @@ jobs:
       # UMD format which is used by Bazel when running tests. UMD processing is in
       # progress and tracked with FW-85.
       - run: node ./scripts/circleci/setup-angular-snapshots.js --tag 8.1.0-next.1-ivy-aot+82e0b4a
-      # Disable type checking when building with Ivy. This is necessary because
-      # type checking is not complete yet and can incorrectly break compilation.
-      # Issue is tracked with FW-1004.
-      - run: sed -i "s/\(_ENABLE_NG_TYPE_CHECKING = \)True/\1False/g" tools/defaults.bzl
       # Run project tests with ngtsc and the Ivy Angular packages.
       - run: yarn bazel build src/... --build_tag_filters=-docs-package --define=compile=aot
       - run: yarn bazel test src/... --build_tag_filters=-docs-package --define=compile=aot --test_tag_filters=-e2e
@@ -430,10 +426,6 @@ jobs:
 
       # Setup Angular ivy snapshots built with ngtsc.
       - run: node ./scripts/circleci/setup-angular-snapshots.js --tag master-ivy-aot
-      # Disable type checking when building with Ivy. This is necessary because
-      # type checking is not complete yet and can incorrectly break compilation.
-      # Issue is tracked with FW-1004.
-      - run: sed -i "s/\(_ENABLE_NG_TYPE_CHECKING = \)True/\1False/g" tools/defaults.bzl
       # Run project tests with ngtsc and the Ivy Angular packages.
       - run: yarn bazel build src/... --build_tag_filters=-docs-package --define=compile=aot
       - run: yarn bazel test src/... --build_tag_filters=-docs-package --define=compile=aot --test_tag_filters=-e2e

src/a11y-demo/checkbox/checkbox-a11y.html

@@ -20,12 +20,12 @@ <h2>Nested checklist</h2>
     <div *ngFor="let task of tasks">
       <mat-checkbox [(ngModel)]="task.completed"
                    [checked]="allComplete(task)"
-                   [indeterminate]="someComplete(task.subtasks)"
+                   [indeterminate]="someComplete(task.subtasks!)"
                    (change)="setAllCompleted(task.subtasks, $event.checked)">
         {{task.name}}
       </mat-checkbox>
       <div class="demo-sub-list">
-        <div *ngFor="let subtask of task.subtasks">
+        <div *ngFor="let subtask of task.subtasks!">
           <mat-checkbox [(ngModel)]="subtask.completed">
             {{subtask.name}}
           </mat-checkbox>

src/a11y-demo/chips/chips-a11y.ts

@@ -8,6 +8,7 @@
 
 import {Component} from '@angular/core';
 import {MatChipInputEvent, MatSnackBar} from '@angular/material';
+import {ThemePalette} from '@angular/material/core';
 
 
 export interface Person {
@@ -22,7 +23,7 @@ export interface Person {
 })
 export class ChipsAccessibilityDemo {
   visible: boolean = true;
-  color: string = '';
+  color: ThemePalette = undefined;
   selectable: boolean = true;
   removable: boolean = true;
   addOnBlur: boolean = true;

src/a11y-demo/grid-list/grid-list-a11y.ts

@@ -39,7 +39,7 @@ export class GridListAccessibilityDemo {
 
   fixedCols = 4;
   fixedRowHeight = 100;
-  ratioGutter = 1;
+  ratioGutter = '1px';
   fitListHeight = '400px';
   ratio = '4:1';
 }

src/a11y-demo/input/input-a11y.ts

@@ -24,7 +24,7 @@ export class InputAccessibilityDemo {
   email: string;
   usd: number;
   comment: string;
-  commentMax = 200;
+  commentMax = '200';
 
   get passwordType() { return this.showPassword ? 'text' : 'password'; }
 

src/cdk/stepper/stepper.ts

@@ -9,7 +9,8 @@
 import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y';
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
-import {END, ENTER, HOME, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
+import {END, ENTER, hasModifierKey, HOME, SPACE} from '@angular/cdk/keycodes';
+import {DOCUMENT} from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -18,10 +19,11 @@ import {
   ContentChild,
   ContentChildren,
   Directive,
-  EventEmitter,
   ElementRef,
+  EventEmitter,
   forwardRef,
   Inject,
+  InjectionToken,
   Input,
   OnChanges,
   OnDestroy,
@@ -31,13 +33,11 @@ import {
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
-  InjectionToken,
 } from '@angular/core';
-import {DOCUMENT} from '@angular/common';
-import {CdkStepLabel} from './step-label';
-import {Observable, Subject, of as obaservableOf} from 'rxjs';
+import {Observable, of as observableOf, Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {CdkStepHeader} from './step-header';
+import {CdkStepLabel} from './step-label';
 
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
@@ -124,7 +124,7 @@ export class CdkStep implements OnChanges {
   @ViewChild(TemplateRef, {static: true}) content: TemplateRef<any>;
 
   /** The top level abstract control of the step. */
-  @Input() stepControl: FormControlLike;
+  @Input() stepControl: AbstractControlLike;
 
   /** Whether user has seen the expanded step content or not. */
   interacted = false;
@@ -254,7 +254,11 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   @ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
 
   /** The list of step components that the stepper is holding. */
-  get steps():  QueryList<CdkStep> {
+  get steps(): QueryList<CdkStep> {
+    // Note that the query list cannot be used in the template as iterable
+    // because it breaks Ivy's strict template type checking. Therefore the
+    // template currently uses "steps.toArray()". Read more about this:
+    // https://github.com/angular/angular/issues/29842
     return this._steps;
   }
 
@@ -331,7 +335,7 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
       .withWrap()
       .withVerticalOrientation(this._orientation === 'vertical');
 
-    (this._dir ? this._dir.change as Observable<Direction> : obaservableOf<Direction>())
+    (this._dir ? this._dir.change as Observable<Direction> : observableOf<Direction>())
       .pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed))
       .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
 
@@ -512,14 +516,13 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
   }
 }
 
-
 /**
- * Simplified representation of a FormControl from @angular/forms.
+ * Simplified representation of an "AbstractControl" from @angular/forms.
  * Used to avoid having to bring in @angular/forms for a single optional interface.
  * @docs-private
  */
-interface FormControlLike {
-  asyncValidator: () => any | null;
+interface AbstractControlLike {
+  asyncValidator: ((control: any) => any) | null;
   dirty: boolean;
   disabled: boolean;
   enabled: boolean;
@@ -528,21 +531,21 @@ interface FormControlLike {
   parent: any;
   pending: boolean;
   pristine: boolean;
-  root: FormControlLike;
+  root: AbstractControlLike;
   status: string;
   statusChanges: Observable<any>;
   touched: boolean;
   untouched: boolean;
   updateOn: any;
   valid: boolean;
-  validator: () => any | null;
+  validator: ((control: any) => any) | null;
   value: any;
   valueChanges: Observable<any>;
   clearAsyncValidators(): void;
   clearValidators(): void;
   disable(opts?: any): void;
   enable(opts?: any): void;
-  get(path: (string | number)[] | string): FormControlLike | null;
+  get(path: (string | number)[] | string): AbstractControlLike | null;
   getError(errorCode: string, path?: (string | number)[] | string): any;
   hasError(errorCode: string, path?: (string | number)[] | string): boolean;
   markAllAsTouched(): void;
@@ -553,15 +556,15 @@ interface FormControlLike {
   markAsUntouched(opts?: any): void;
   patchValue(value: any, options?: Object): void;
   reset(value?: any, options?: Object): void;
-  setAsyncValidators(newValidator: () => any | (() => any)[] | null): void;
+  setAsyncValidators(newValidator: (control: any) => any |
+      ((control: any) => any)[] | null): void;
   setErrors(errors: {[key: string]: any} | null, opts?: any): void;
   setParent(parent: any): void;
-  setValidators(newValidator: () => any | (() => any)[] | null): void;
+  setValidators(newValidator: (control: any) => any |
+      ((control: any) => any)[] | null): void;
   setValue(value: any, options?: Object): void;
   updateValueAndValidity(opts?: any): void;
   patchValue(value: any, options?: any): void;
-  registerOnChange(fn: Function): void;
-  registerOnDisabledChange(fn: (isDisabled: boolean) => void): void;
   reset(formState?: any, options?: any): void;
   setValue(value: any, options?: any): void;
 }

src/dev-app/BUILD.bazel

@@ -31,6 +31,9 @@ ng_module(
         ":dev_app_scss",
         ":theme",
     ],
+    # TODO(devversion): Temporarily disabled due to an Ivy template type checking bug
+    # that is surfaced in the "MdcMenu" demo. The issue is tracked with: COMP-173
+    type_check = False,
     deps = [
         "@npm//@angular/animations",
         "@npm//@angular/common",

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

@@ -8,6 +8,7 @@
 
 import {Component, Directive} from '@angular/core';
 import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
+import {ThemePalette} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
@@ -96,20 +97,20 @@ export class CheckboxDemo {
   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;
-  demoLabelledBy = null;
-  demoId = null;
-  demoName = null;
-  demoValue = null;
-  demoColor = 'primary';
+  demoLabel: string;
+  demoLabelledBy: string;
+  demoId: string;
+  demoName: string;
+  demoValue: string;
+  demoColor: ThemePalette = 'primary';
   demoDisableRipple = false;
   demoHideLabel = false;
 

src/dev-app/checkbox/nested-checklist.html

@@ -3,12 +3,12 @@ <h2>Tasks</h2>
   <li *ngFor="let task of tasks">
     <mat-checkbox [(ngModel)]="task.completed"
                  [checked]="allComplete(task)"
-                 [indeterminate]="someComplete(task.subtasks)"
-                 (change)="setAllCompleted(task.subtasks, $event.checked)">
+                 [indeterminate]="someComplete(task.subtasks!)"
+                 (change)="setAllCompleted(task.subtasks!, $event.checked)">
       <h3>{{task.name}}</h3>
     </mat-checkbox>
     <ul>
-      <li *ngFor="let subtask of task.subtasks">
+      <li *ngFor="let subtask of task.subtasks!">
         <mat-checkbox [(ngModel)]="subtask.completed">
           {{subtask.name}}
         </mat-checkbox>

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,14 @@ <h2>Datepicker with value property binding</h2>
   <mat-datepicker-toggle [for]="datePicker4"></mat-datepicker-toggle>
   <mat-form-field>
     <mat-label>Value binding</mat-label>
-    <input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
+      <!--
+        TODO for reviewer: Angular sets the inputs for both directives on the
+        input element here. e.g. [value] is set for MatInput and MatDatepicker.
+        MatInput#value expects a string whereas MatDatepicker#value expects a date.
+        This breaks strict template type checking. What should we do here?
+      -->
+    <input matInput [matDatepicker]="datePicker4" [value]="$any(date)" [min]="minDate"
+           [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

@@ -49,15 +49,16 @@ export class DatepickerDemo {
 
   dateCtrl = new FormControl();
 
-  dateFilter =
-      (date: Date) => !(date.getFullYear() % 2) && (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;
+
+  dateFilter(date: Date|null) {
+    return !!(date && !(date.getFullYear() % 2) && date.getMonth() % 2 && !(date.getDate() % 2));
+  }
 }
 
 // Custom header component for datepicker