refactor: attempt to resolve @Input template type errors

.bazelrc

@@ -37,12 +37,12 @@ test --test_output=errors
 build:release --workspace_status_command="node ./tools/bazel-stamp-vars.js"
 
 ################################
-# Temporary Settings for Ivy   #
+# Settings for Ivy             #
 ################################
 
-# 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
+# We want to compile with Ivy and with "ngtsc".
+# To build for ViewEngine, use --define=compile=legacy.
+build --define=compile=aot
 
 #######################
 # Remote HTTP Caching #

.circleci/config.yml

@@ -406,10 +406,6 @@ jobs:
       # Setup ngcc to make the Angular packages compatible with ngtsc (i.e. creating
       # directive and component definitions as static class members).
       - run: node ./scripts/circleci/setup-ivy-ngcc.js
-      # 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: bazel build src/... --build_tag_filters=-docs-package,-e2e --define=compile=aot
       - run: bazel test src/... --build_tag_filters=-docs-package,-e2e --test_tag_filters=-e2e --define=compile=aot
@@ -433,10 +429,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: bazel build src/... --build_tag_filters=-docs-package,-e2e --define=compile=aot
       - run: bazel test src/... --build_tag_filters=-docs-package,-e2e --test_tag_filters=-e2e --define=compile=aot

package.json

@@ -9,11 +9,11 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">= 5.4.1",
+    "node": "10",
     "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 | ngcc --properties main",
     "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",
@@ -41,33 +41,33 @@
   "requiredAngularVersion": "^8.0.0 || ^9.0.0-0",
   "requiredMDCVersion": "^4.0.0-alpha.0",
   "dependencies": {
-    "@angular/animations": "^9.0.0-next.10",
-    "@angular/common": "^9.0.0-next.10",
-    "@angular/compiler": "^9.0.0-next.10",
-    "@angular/core": "^9.0.0-next.10",
-    "@angular/elements": "^9.0.0-next.10",
-    "@angular/forms": "^9.0.0-next.10",
-    "@angular/platform-browser": "^9.0.0-next.10",
+    "@angular/animations": "^9.0.0-next.11",
+    "@angular/common": "^9.0.0-next.11",
+    "@angular/compiler": "^9.0.0-next.11",
+    "@angular/core": "^9.0.0-next.11",
+    "@angular/elements": "^9.0.0-next.11",
+    "@angular/forms": "^9.0.0-next.11",
+    "@angular/platform-browser": "^9.0.0-next.11",
     "@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": {
-    "@angular-devkit/core": "^9.0.0-next.9",
-    "@angular-devkit/schematics": "^9.0.0-next.9",
-    "@angular/bazel": "^9.0.0-next.10",
-    "@angular/compiler-cli": "^9.0.0-next.10",
-    "@angular/platform-browser-dynamic": "^9.0.0-next.10",
-    "@angular/platform-server": "^9.0.0-next.10",
-    "@angular/router": "^9.0.0-next.10",
-    "@angular/upgrade": "^9.0.0-next.10",
+    "@angular-devkit/core": "^9.0.0-next.12",
+    "@angular-devkit/schematics": "^9.0.0-next.12",
+    "@angular/bazel": "^9.0.0-next.11",
+    "@angular/compiler-cli": "^9.0.0-next.11",
+    "@angular/platform-browser-dynamic": "^9.0.0-next.11",
+    "@angular/platform-server": "^9.0.0-next.11",
+    "@angular/router": "^9.0.0-next.11",
+    "@angular/upgrade": "^9.0.0-next.11",
     "@bazel/bazel": "^0.29.0",
     "@bazel/buildifier": "^0.29.0",
     "@bazel/ibazel": "^0.10.3",
@@ -77,7 +77,7 @@
     "@bazel/protractor": "^0.38.3",
     "@firebase/app-types": "^0.3.2",
     "@octokit/rest": "^16.28.7",
-    "@schematics/angular": "^9.0.0-next.9",
+    "@schematics/angular": "^9.0.0-next.12",
     "@types/browser-sync": "^2.26.1",
     "@types/fs-extra": "^4.0.3",
     "@types/glob": "^5.0.33",
@@ -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/a11y-demo/checkbox/checkbox-a11y.ts

@@ -50,12 +50,18 @@ export class CheckboxAccessibilityDemo {
     return task.completed || (subtasks != null && subtasks.every(t => t.completed));
   }
 
-  someComplete(tasks: Task[]): boolean {
+  someComplete(tasks: Task[] | undefined | null): boolean {
+    if (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 == null) {
+      return;
+    }
     tasks.forEach(t => t.completed = completed);
   }
 }

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

@@ -9,6 +9,7 @@
 import {Component} from '@angular/core';
 import {MatChipInputEvent} from '@angular/material/chips';
 import {MatSnackBar} from '@angular/material/snack-bar';
+import {ThemePalette} from '@angular/material/core';
 
 
 export interface Person {
@@ -23,7 +24,7 @@ export interface Person {
 })
 export class ChipsAccessibilityDemo {
   visible: boolean = true;
-  color: string = '';
+  color: ThemePalette;
   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

@@ -34,7 +34,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {Observable, of as obaservableOf, Subject} from 'rxjs';
+import {Observable, of as observableOf, Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
 
 import {CdkStepHeader} from './step-header';
@@ -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;
@@ -257,6 +257,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
    */
   @ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
 
+  /**
+   * We need to store the steps in an Iterable due to strict template type checking with *ngFor and
+   * https://github.com/angular/angular/issues/29842.
+   */
+  _stepsArray: CdkStep[] = [];
+
   /** The list of step components that the stepper is holding. */
   get steps(): QueryList<CdkStep> {
     return this._steps;
@@ -332,13 +338,13 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
 
   ngAfterViewInit() {
     // Note that while the step headers are content children by default, any components that
-    // extend this one might have them as view chidren. We initialize the keyboard handling in
+    // extend this one might have them as view children. We initialize the keyboard handling in
     // AfterViewInit so we're guaranteed for both view and content children to be defined.
     this._keyManager = new FocusKeyManager<FocusableOption>(this._stepHeader)
                            .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));
 
@@ -517,12 +523,12 @@ 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;
@@ -531,21 +537,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;
@@ -556,15 +562,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/badge/badge-demo.html

@@ -2,31 +2,31 @@
 
   <div class="demo-badge">
     <h3>Text</h3>
-    <span [matBadge]="badgeContent" matBadgeOverlap="false" *ngIf="visible">
+    <span [matBadge]="badgeContent" [matBadgeOverlap]="false" *ngIf="visible">
       Hello
     </span>
 
-    <span [matBadge]="11111" matBadgeOverlap="false">
+    <span matBadge="11111" [matBadgeOverlap]="false">
       Hello
     </span>
 
-    <span matBadge="22" matBadgeOverlap="false" matBadgePosition="below after" matBadgeColor="accent">
+    <span matBadge="22" [matBadgeOverlap]="false" matBadgePosition="below after" matBadgeColor="accent">
       Hello
     </span>
 
-    <span matBadge="22" matBadgeOverlap="false" matBadgePosition="above before" matBadgeColor="warn">
+    <span matBadge="22" [matBadgeOverlap]="false" matBadgePosition="above before" matBadgeColor="warn">
       Hello
     </span>
 
-    <span matBadge="⚡️" matBadgeOverlap="false" matBadgePosition="below before">
+    <span matBadge="⚡️" [matBadgeOverlap]="false" matBadgePosition="below before">
       Hello
     </span>
 
     <span [matBadge]="badgeContent" matBadgeDescription="I've got {{badgeContent}} problems">
       Aria
     </span>
 
-    <span [matBadge]="badgeContent" matBadgeHidden="true">
+    <span [matBadge]="badgeContent" [matBadgeHidden]="true">
       Hidden
     </span>
 
@@ -48,15 +48,15 @@ <h3>Buttons</h3>
       <mat-icon color="primary">home</mat-icon>
     </button>
 
-    <button mat-raised-button [matBadge]="badgeContent" matBadgeDisabled>
+    <button mat-raised-button [matBadge]="badgeContent" [matBadgeDisabled]="true">
       <mat-icon color="primary">home</mat-icon>
     </button>
 
     <button mat-stroked-button [matBadge]="badgeContent">
       <mat-icon color="primary">home</mat-icon>
     </button>
 
-    <button disabled mat-raised-button [matBadge]="badgeContent" matBadgeDisabled>
+    <button [disabled]="true" mat-raised-button [matBadge]="badgeContent" [matBadgeDisabled]="true">
       <mat-icon color="primary">home</mat-icon>
     </button>
 
@@ -65,7 +65,7 @@ <h3>Buttons</h3>
     </button>
 
     <button mat-raised-button>
-      <mat-icon color="primary" matBadge="22" color="accent">home</mat-icon>
+      <mat-icon color="primary" matBadge="22">home</mat-icon>
     </button>
   </div>
 

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

@@ -25,7 +25,7 @@
     | Text 6 |
     <mat-form-field>
       <mat-label>Input</mat-label>
-      <textarea matInput cdkTextareaAutosize>Textarea&#10;Line 2</textarea>
+      <textarea matInput [cdkTextareaAutosize]="true">Textarea&#10;Line 2</textarea>
     </mat-form-field>
     | Text After
   </mat-card-content>
@@ -59,7 +59,7 @@ <h1>
       | Text 6 |
       <mat-form-field>
         <mat-label>Input</mat-label>
-        <textarea matInput cdkTextareaAutosize>Textarea&#10;Line 2</textarea>
+        <textarea matInput [cdkTextareaAutosize]="true">Textarea&#10;Line 2</textarea>
       </mat-form-field>
       | Text After
     </h1>