Skip to content

Commit db283f1

Browse files
Splaktarmmalerba
Splaktar
authored and
mmalerba
committed
refactor: enable Ivy and fix template type checking issues (#17392)
- enable Ivy and fix template type checking in Bazel - for libraries, examples, dev-app, CI - add `postinstall` task for `ivy-ngcc` and configure it for our SystemJS setup - pin to Angular `9.0.0-next.10` for this PR - Angular `9.0.0-next.11` brings in a lot of new template type checking errors - fix buggy show bounding box checkbox in connected-overlay-demo - fix stylelint to work with WebStorm plugin - restrict NodeJS version to 10.x - We can't go to NodeJS 12.x without dropping or upgrading Gulp to 4.x - export `ProgressBarMode` type from `mdc-progress-bar` and `mat-progress-bar` - export `MatDrawerMode` type from `mat-drawer` - Add `| null` to `mat-tab-body`'s `@Input() origin: number;` Fixes #16606. Closes #16373.
1 parent 9933479 commit db283f1

File tree

65 files changed

+847
-1270
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+847
-1270
lines changed

‎.bazelrc

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ test --test_output=errors
3737
build:release --workspace_status_command="node ./tools/bazel-stamp-vars.js"
3838

3939
################################
40-
# Temporary Settings for Ivy #
40+
# Settings for Ivy #
4141
################################
4242

43-
# Use the legacy AOT compiler strategy. We don't want to compile with Ivy nor with "ngtsc" which
44-
# does not generate factory files which are needed for AOT.
45-
build --define=compile=legacy
43+
# We want to compile with Ivy and with "ngtsc".
44+
# To build for ViewEngine, use --define=compile=legacy.
45+
build --define=compile=aot
4646

4747
#######################
4848
# Remote HTTP Caching #

‎.circleci/config.yml

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ jobs:
177177
- *yarn_install
178178
- *setup_bazel_binary
179179

180-
- run: bazel test tools/public_api_guard/...
180+
- run: bazel test tools/public_api_guard/... --define=compile=legacy
181181

182182
# -----------------------------------------------------------------
183183
# Job that runs the e2e tests with Protractor and Chromium headless
@@ -406,10 +406,6 @@ jobs:
406406
# Setup ngcc to make the Angular packages compatible with ngtsc (i.e. creating
407407
# directive and component definitions as static class members).
408408
- run: node ./scripts/circleci/setup-ivy-ngcc.js
409-
# Disable type checking when building with Ivy. This is necessary because
410-
# type checking is not complete yet and can incorrectly break compilation.
411-
# Issue is tracked with FW-1004.
412-
- run: sed -i "s/\(_ENABLE_NG_TYPE_CHECKING = \)True/\1False/g" tools/defaults.bzl
413409
# Run project tests with ngtsc and the Ivy Angular packages.
414410
- run: bazel build src/... --build_tag_filters=-docs-package,-e2e --define=compile=aot
415411
- run: bazel test src/... --build_tag_filters=-docs-package,-e2e --test_tag_filters=-e2e --define=compile=aot
@@ -433,10 +429,6 @@ jobs:
433429

434430
# Setup Angular ivy snapshots built with ngtsc.
435431
- run: node ./scripts/circleci/setup-angular-snapshots.js --tag master-ivy-aot
436-
# Disable type checking when building with Ivy. This is necessary because
437-
# type checking is not complete yet and can incorrectly break compilation.
438-
# Issue is tracked with FW-1004.
439-
- run: sed -i "s/\(_ENABLE_NG_TYPE_CHECKING = \)True/\1False/g" tools/defaults.bzl
440432
# Run project tests with ngtsc and the Ivy Angular packages.
441433
- run: bazel build src/... --build_tag_filters=-docs-package,-e2e --define=compile=aot
442434
- run: bazel test src/... --build_tag_filters=-docs-package,-e2e --test_tag_filters=-e2e --define=compile=aot

‎stylelint-config.json renamed to ‎.stylelintrc.json

File renamed without changes.

‎package.json

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
},
1010
"license": "MIT",
1111
"engines": {
12-
"node": ">= 5.4.1",
12+
"node": "^10.13.0",
1313
"yarn": ">= 1.17.3"
1414
},
1515
"scripts": {
16-
"postinstall": "node --preserve-symlinks --preserve-symlinks-main tools/bazel/postinstall-patches.js",
16+
"postinstall": "node --preserve-symlinks --preserve-symlinks-main tools/bazel/postinstall-patches.js | ivy-ngcc --properties main",
1717
"build": "bash ./scripts/build-packages-dist.sh",
1818
"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",
1919
"bazel:format-lint": "yarn -s bazel:buildifier --lint=warn --mode=check",
@@ -41,33 +41,33 @@
4141
"requiredAngularVersion": "^9.0.0-0 || ^10.0.0-0",
4242
"requiredMDCVersion": "^4.0.0-alpha.0",
4343
"dependencies": {
44-
"@angular/animations": "^9.0.0-next.10",
45-
"@angular/common": "^9.0.0-next.10",
46-
"@angular/compiler": "^9.0.0-next.10",
47-
"@angular/core": "^9.0.0-next.10",
48-
"@angular/elements": "^9.0.0-next.10",
49-
"@angular/forms": "^9.0.0-next.10",
50-
"@angular/platform-browser": "^9.0.0-next.10",
44+
"@angular/animations": "9.0.0-next.10",
45+
"@angular/common": "9.0.0-next.10",
46+
"@angular/compiler": "9.0.0-next.10",
47+
"@angular/core": "9.0.0-next.10",
48+
"@angular/elements": "9.0.0-next.10",
49+
"@angular/forms": "9.0.0-next.10",
50+
"@angular/platform-browser": "9.0.0-next.10",
5151
"@types/googlemaps": "^3.37.0",
5252
"@types/youtube": "^0.0.38",
5353
"@webcomponents/custom-elements": "^1.1.0",
54-
"core-js": "^2.6.1",
54+
"core-js": "^2.6.9",
5555
"material-components-web": "^4.0.0-canary.062ade5c0.0",
5656
"rxjs": "^6.5.3",
5757
"systemjs": "0.19.43",
5858
"tsickle": "^0.35.0",
59-
"tslib": "^1.9.3",
59+
"tslib": "^1.10.0",
6060
"zone.js": "~0.10.2"
6161
},
6262
"devDependencies": {
6363
"@angular-devkit/core": "^9.0.0-next.9",
6464
"@angular-devkit/schematics": "^9.0.0-next.9",
65-
"@angular/bazel": "^9.0.0-next.10",
66-
"@angular/compiler-cli": "^9.0.0-next.10",
67-
"@angular/platform-browser-dynamic": "^9.0.0-next.10",
68-
"@angular/platform-server": "^9.0.0-next.10",
69-
"@angular/router": "^9.0.0-next.10",
70-
"@angular/upgrade": "^9.0.0-next.10",
65+
"@angular/bazel": "9.0.0-next.10",
66+
"@angular/compiler-cli": "9.0.0-next.10",
67+
"@angular/platform-browser-dynamic": "9.0.0-next.10",
68+
"@angular/platform-server": "9.0.0-next.10",
69+
"@angular/router": "9.0.0-next.10",
70+
"@angular/upgrade": "9.0.0-next.10",
7171
"@bazel/bazel": "^0.29.0",
7272
"@bazel/buildifier": "^0.29.0",
7373
"@bazel/ibazel": "^0.10.3",
@@ -98,11 +98,11 @@
9898
"browser-sync": "^2.26.7",
9999
"chalk": "^2.4.2",
100100
"clang-format": "^1.2.4",
101-
"codelyzer": "^5.1.1",
101+
"codelyzer": "^5.1.2",
102102
"conventional-changelog": "^3.0.5",
103103
"dgeni": "^0.4.11",
104104
"dgeni-packages": "^0.27.1",
105-
"firebase-tools": "^4.1.0",
105+
"firebase-tools": "^7.5.0",
106106
"fs-extra": "^3.0.1",
107107
"glob": "^7.1.2",
108108
"gulp": "^3.9.1",
@@ -151,7 +151,7 @@
151151
"ts-api-guardian": "^0.4.6",
152152
"ts-node": "^3.0.4",
153153
"tsconfig-paths": "^2.3.0",
154-
"tslint": "^5.19.0",
154+
"tslint": "^5.20.0",
155155
"tsutils": "^3.0.0",
156156
"typescript": "3.5.3",
157157
"uglify-js": "^2.8.14",

‎src/a11y-demo/checkbox/checkbox-a11y.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,18 @@ export class CheckboxAccessibilityDemo {
5050
return task.completed || (subtasks != null && subtasks.every(t => t.completed));
5151
}
5252

53-
someComplete(tasks: Task[]): boolean {
53+
someComplete(tasks: Task[] | undefined | null): boolean {
54+
if (tasks == null) {
55+
return false;
56+
}
5457
const numComplete = tasks.filter(t => t.completed).length;
5558
return numComplete > 0 && numComplete < tasks.length;
5659
}
5760

58-
setAllCompleted(tasks: Task[], completed: boolean) {
61+
setAllCompleted(tasks: Task[] | undefined | null, completed: boolean): void {
62+
if (tasks == null) {
63+
return;
64+
}
5965
tasks.forEach(t => t.completed = completed);
6066
}
6167
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import {Component} from '@angular/core';
1010
import {MatChipInputEvent} from '@angular/material/chips';
1111
import {MatSnackBar} from '@angular/material/snack-bar';
12+
import {ThemePalette} from '@angular/material/core';
1213

1314

1415
export interface Person {
@@ -23,7 +24,7 @@ export interface Person {
2324
})
2425
export class ChipsAccessibilityDemo {
2526
visible: boolean = true;
26-
color: string = '';
27+
color: ThemePalette;
2728
selectable: boolean = true;
2829
removable: boolean = true;
2930
addOnBlur: boolean = true;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export class GridListAccessibilityDemo {
3939

4040
fixedCols = 4;
4141
fixedRowHeight = 100;
42-
ratioGutter = 1;
42+
ratioGutter = '1px';
4343
fitListHeight = '400px';
4444
ratio = '4:1';
4545
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export class InputAccessibilityDemo {
2424
email: string;
2525
usd: number;
2626
comment: string;
27-
commentMax = 200;
27+
commentMax = '200';
2828

2929
get passwordType() { return this.showPassword ? 'text' : 'password'; }
3030

‎src/cdk/stepper/stepper.ts

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {
3434
ViewChild,
3535
ViewEncapsulation,
3636
} from '@angular/core';
37-
import {Observable, of as obaservableOf, Subject} from 'rxjs';
37+
import {Observable, of as observableOf, Subject} from 'rxjs';
3838
import {startWith, takeUntil} from 'rxjs/operators';
3939

4040
import {CdkStepHeader} from './step-header';
@@ -124,7 +124,7 @@ export class CdkStep implements OnChanges {
124124
@ViewChild(TemplateRef, {static: true}) content: TemplateRef<any>;
125125

126126
/** The top level abstract control of the step. */
127-
@Input() stepControl: FormControlLike;
127+
@Input() stepControl: AbstractControlLike;
128128

129129
/** Whether user has seen the expanded step content or not. */
130130
interacted = false;
@@ -257,6 +257,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
257257
*/
258258
@ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
259259

260+
/**
261+
* We need to store the steps in an Iterable due to strict template type checking with *ngFor and
262+
* https://github.com/angular/angular/issues/29842.
263+
*/
264+
_stepsArray: CdkStep[] = [];
265+
260266
/** The list of step components that the stepper is holding. */
261267
get steps(): QueryList<CdkStep> {
262268
return this._steps;
@@ -332,13 +338,13 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
332338

333339
ngAfterViewInit() {
334340
// Note that while the step headers are content children by default, any components that
335-
// extend this one might have them as view chidren. We initialize the keyboard handling in
341+
// extend this one might have them as view children. We initialize the keyboard handling in
336342
// AfterViewInit so we're guaranteed for both view and content children to be defined.
337343
this._keyManager = new FocusKeyManager<FocusableOption>(this._stepHeader)
338344
.withWrap()
339345
.withVerticalOrientation(this._orientation === 'vertical');
340346

341-
(this._dir ? (this._dir.change as Observable<Direction>) : obaservableOf<Direction>())
347+
(this._dir ? (this._dir.change as Observable<Direction>) : observableOf<Direction>())
342348
.pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed))
343349
.subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
344350

@@ -517,12 +523,12 @@ export class CdkStepper implements AfterViewInit, OnDestroy {
517523

518524

519525
/**
520-
* Simplified representation of a FormControl from @angular/forms.
526+
* Simplified representation of an "AbstractControl" from @angular/forms.
521527
* Used to avoid having to bring in @angular/forms for a single optional interface.
522528
* @docs-private
523529
*/
524-
interface FormControlLike {
525-
asyncValidator: () => any | null;
530+
interface AbstractControlLike {
531+
asyncValidator: ((control: any) => any) | null;
526532
dirty: boolean;
527533
disabled: boolean;
528534
enabled: boolean;
@@ -531,21 +537,21 @@ interface FormControlLike {
531537
parent: any;
532538
pending: boolean;
533539
pristine: boolean;
534-
root: FormControlLike;
540+
root: AbstractControlLike;
535541
status: string;
536542
statusChanges: Observable<any>;
537543
touched: boolean;
538544
untouched: boolean;
539545
updateOn: any;
540546
valid: boolean;
541-
validator: () => any | null;
547+
validator: ((control: any) => any) | null;
542548
value: any;
543549
valueChanges: Observable<any>;
544550
clearAsyncValidators(): void;
545551
clearValidators(): void;
546552
disable(opts?: any): void;
547553
enable(opts?: any): void;
548-
get(path: (string | number)[] | string): FormControlLike | null;
554+
get(path: (string | number)[] | string): AbstractControlLike | null;
549555
getError(errorCode: string, path?: (string | number)[] | string): any;
550556
hasError(errorCode: string, path?: (string | number)[] | string): boolean;
551557
markAllAsTouched(): void;
@@ -556,15 +562,15 @@ interface FormControlLike {
556562
markAsUntouched(opts?: any): void;
557563
patchValue(value: any, options?: Object): void;
558564
reset(value?: any, options?: Object): void;
559-
setAsyncValidators(newValidator: () => any | (() => any)[] | null): void;
565+
setAsyncValidators(newValidator: (control: any) => any |
566+
((control: any) => any)[] | null): void;
560567
setErrors(errors: {[key: string]: any} | null, opts?: any): void;
561568
setParent(parent: any): void;
562-
setValidators(newValidator: () => any | (() => any)[] | null): void;
569+
setValidators(newValidator: (control: any) => any |
570+
((control: any) => any)[] | null): void;
563571
setValue(value: any, options?: Object): void;
564572
updateValueAndValidity(opts?: any): void;
565573
patchValue(value: any, options?: any): void;
566-
registerOnChange(fn: Function): void;
567-
registerOnDisabledChange(fn: (isDisabled: boolean) => void): void;
568574
reset(formState?: any, options?: any): void;
569575
setValue(value: any, options?: any): void;
570576
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h3>Text</h3>
66
Hello
77
</span>
88

9-
<span [matBadge]="11111" matBadgeOverlap="false">
9+
<span matBadge="11111" matBadgeOverlap="false">
1010
Hello
1111
</span>
1212

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

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import {Component, Directive} from '@angular/core';
1010
import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
1111
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
12+
import {ThemePalette} from '@angular/material/core';
1213

1314

1415
export interface Task {
@@ -46,7 +47,7 @@ export class AnimationsNoop {
4647
margin-bottom: 4px;
4748
}
4849
`],
49-
templateUrl: 'nested-checklist.html',
50+
templateUrl: './nested-checklist.html',
5051
})
5152
export class MatCheckboxDemoNestedChecklist {
5253
tasks: Task[] = [
@@ -76,12 +77,18 @@ export class MatCheckboxDemoNestedChecklist {
7677
return task.completed || (subtasks != null && subtasks.every(t => t.completed));
7778
}
7879

79-
someComplete(tasks: Task[]): boolean {
80+
someComplete(tasks: Task[] | undefined | null): boolean {
81+
if (tasks == null) {
82+
return false;
83+
}
8084
const numComplete = tasks.filter(t => t.completed).length;
8185
return numComplete > 0 && numComplete < tasks.length;
8286
}
8387

84-
setAllCompleted(tasks: Task[], completed: boolean) {
88+
setAllCompleted(tasks: Task[] | undefined | null, completed: boolean): void {
89+
if (tasks == null) {
90+
return;
91+
}
8592
tasks.forEach(t => t.completed = completed);
8693
}
8794
}
@@ -96,20 +103,20 @@ export class CheckboxDemo {
96103
isIndeterminate: boolean = false;
97104
isChecked: boolean = false;
98105
isDisabled: boolean = false;
99-
labelPosition: string = 'after';
106+
labelPosition: 'after' | 'before' = 'after';
100107
useAlternativeColor: boolean = false;
101108

102109
demoRequired = false;
103110
demoLabelAfter = false;
104111
demoChecked = false;
105112
demoDisabled = false;
106113
demoIndeterminate = false;
107-
demoLabel = null;
108-
demoLabelledBy = null;
109-
demoId = null;
110-
demoName = null;
111-
demoValue = null;
112-
demoColor = 'primary';
114+
demoLabel: string;
115+
demoLabelledBy: string;
116+
demoId: string;
117+
demoName: string;
118+
demoValue: string;
119+
demoColor: ThemePalette = 'primary';
113120
demoDisableRipple = false;
114121
demoHideLabel = false;
115122

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export interface DemoColor {
3030
export class ChipsDemo {
3131
tabIndex = 0;
3232
visible = true;
33-
color = '';
33+
color: ThemePalette;
3434
selectable = true;
3535
removable = true;
3636
addOnBlur = true;

0 commit comments

Comments
 (0)