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

fix buggy show bounding box checkbox in connected-overlay-demo
fix stylelint to work with WebStorm plugin

Fixes #16606. Closes #16373.

Author: Splaktar

.bazelrc

@@ -40,9 +40,8 @@ build:release --workspace_status_command="node ./tools/bazel-stamp-vars.js"
 # Temporary 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
+# Use the Ivy AOT compiler strategy. We want to compile with Ivy and with "ngtsc".
+build --define=compile=aot --keep_going=true
 
 #######################
 # 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

stylelint-config.json renamed to .stylelintrc.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 | ivy-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.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",
     "@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/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",
     "@bazel/bazel": "^0.29.0",
     "@bazel/buildifier": "^0.29.0",
     "@bazel/ibazel": "^0.10.3",
@@ -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"

package.json

@@ -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 === 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);
   }
 }

src/a11y-demo/checkbox/checkbox-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/chips/chips-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/grid-list/grid-list-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/a11y-demo/input/input-a11y.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;
@@ -338,7 +338,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));
 
@@ -517,12 +517,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 +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;
@@ -556,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/cdk/stepper/stepper.ts

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

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

@@ -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;
-  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/checkbox-demo.ts

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

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

@@ -1,6 +1,6 @@
 <div style="height: 500px"></div>
 
-<div class="demo-options mat-typography">
+<div class="demo-options-connected-overlay mat-typography">
   <div>
     <h2>Origin X</h2>
     <mat-radio-group [(ngModel)]="originX">
@@ -81,8 +81,8 @@ <h2>Options</h2>
     </div>
 
     <div>
-      <mat-checkbox [checked]="showBoundingBox" [disabled]="!overlayRef"
-          (click)="toggleShowBoundingBox()">
+      <mat-checkbox [(ngModel)]="isBoundingBoxVisible" [disabled]="!overlayRef"
+                    (click)="showBoundingBox(!isBoundingBoxVisible)">
         Show bounding box
       </mat-checkbox>
     </div>
@@ -93,18 +93,18 @@ <h2>Options</h2>
   </div>
 </div>
 
-<div class="demo-trigger">
+<div class="demo-trigger-connected-overlay">
   <button mat-raised-button
       cdkOverlayOrigin
       type="button"
-      [disabled]="overlayRef"
+      [disabled]="!!overlayRef"
       (click)="openWithConfig()">Open</button>
 </div>
 
 <div style="height: 500px"></div>
 
 <ng-template #overlay>
-  <div class="demo-overlay">
+  <div class="demo-overlay-connected-overlay">
     <div style="overflow: auto;">
       <ul><li *ngFor="let item of itemArray; index as i">{{itemText}} {{i}}</li></ul>
     </div>