Regression in compiler-cli 10.1.0+: build is 10x times slower

[x87]

🐞 bug report

Affected Package

The issue is caused by package @angular/compiler-cli@10.1.0

Is this a regression?

Yes, the previous version in which this bug was not present was: @angular/compiler-cli@10.0.14

Description

During an attempt to upgrade our repo to Angular 10.1 we noticed that one of our applications is not building anymore. We have investigated and found that one particular component is now taking too much time to compile (10 minutes and more).

It started on @angular/compiler-cli 10.1.0 With this version an app with only one component takes ~3 minutes to compile. With @angular/compiler-cli 10.0.14 the build takes ~20 seconds to complete.

The issue is reproducible with fullTemplateTypeCheck: true and strictNullChecks: true.

🔬 Minimal Reproduction

https://github.com/x87/ng10bug

Run yarn build and observe build time. Then change strictNullChecks to true in tsconfig.json and re-run yarn build.

🌍 Your Environment

Angular Version:

Angular CLI: 10.1.6
Node: 12.18.2
OS: darwin x64

Angular: 10.1.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1001.6
@angular-devkit/build-angular      0.1001.6
@angular-devkit/build-ng-packagr   0.1001.6
@angular-devkit/core               10.1.6
@angular-devkit/schematics         10.1.6
@angular/cli                       10.1.6
@schematics/angular                10.1.6
@schematics/update                 0.1001.6
rxjs                               6.5.5
typescript                         4.0.3

[JoostK]

Hmm, interesting. The generated Type-Check Block (TCB) has actually been simplified in 10.1 to improve performance.

10.0.14 TCB

const _ctor1: <T = unknown>(init: Pick<i1.NgIf<T>, "ngIf" | "ngIfThen" | "ngIfElse">) => i1.NgIf<T> = (null!);
const _ctor2: (init: {}) => i2.ɵangular_packages_forms_forms_y = (null!);
const _ctor3: (init: {}) => i2.NgControlStatusGroup = (null!);
const _ctor4: (init: Pick<i2.FormGroupDirective, "form">) => i2.FormGroupDirective = (null!);

/*tcb1*/
function _tcb1(ctx: i0.AppComponent) { if (true) {
    var _t1 = _ctor1({ "ngIf": (((!(((ctx).readOnly /*17,25*/) /*17,25*/) /*16,25*/) as any)) /*9,26*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*0,27*/;
    var _t2: any = (null!);
    if (!(((ctx).readOnly /*17,25*/) /*17,25*/) /*16,25*/ /*ignore*/) {
        var _t3 = document.createElement("section") /*0,27*/;
        var _t4 = _ctor1({ "ngIf": (((!(((ctx).view /*43,47*/) /*43,47*/) /*42,47*/) as any)) /*35,48*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*30,49*/;
        var _t5: any = (null!);
        if (!(((ctx).view /*43,47*/) /*43,47*/) /*42,47*/ /*ignore*/) {
            var _t6 = document.createElement("div") /*30,49*/;
        }
        var _t7 = document.createElement("form") /*58,88*/;
        var _t8 = _ctor2({}) /*58,88*/;
        var _t9 = _ctor3({}) /*58,88*/;
        var _t10 = _ctor4({ "form": ((((ctx).formGroup /*77,86*/) /*77,86*/ as any)) /*64,87*/ }) /*58,88*/;
        var _t11 = document.createElement("fieldset") /*93,103*/;
        var _t12 = _ctor1({ "ngIf": (((((((((ctx).month /*122,127*/) /*122,127*/)!.invalid as any) /*122,136*/) || (((((ctx).day /*140,143*/) /*140,143*/)!.invalid as any) /*140,152*/) /*122,152*/) || (((((ctx).year /*156,160*/) /*156,160*/)!.invalid as any) /*156,169*/) /*122,169*/) as any)) /*115,170*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*110,171*/;
        var _t13: any = (null!);
        if (((((((ctx).month /*122,127*/) /*122,127*/)!.invalid as any) /*122,136*/) || (((((ctx).day /*140,143*/) /*140,143*/)!.invalid as any) /*140,152*/) /*122,152*/) || (((((ctx).year /*156,160*/) /*156,160*/)!.invalid as any) /*156,169*/) /*122,169*/ /*ignore*/) {
            var _t14 = document.createElement("div") /*110,171*/;
            var _t15 = _ctor1({ "ngIf": ((((((((((ctx).month /*202,207*/) /*202,207*/)!.invalid as any) /*202,216*/) && (((((ctx).day /*220,223*/) /*220,223*/)!.invalid as any) /*220,232*/) /*202,232*/) && (((((ctx).year /*236,240*/) /*236,240*/)!.invalid as any) /*236,249*/) /*202,249*/) && (((ctx).submitted /*253,262*/) /*253,262*/) /*202,262*/) as any)) /*195,263*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*180,273*/;
            var _t16: any = (null!);
            if ((((((((ctx).month /*202,207*/) /*202,207*/)!.invalid as any) /*202,216*/) && (((((ctx).day /*220,223*/) /*220,223*/)!.invalid as any) /*220,232*/) /*202,232*/) && (((((ctx).year /*236,240*/) /*236,240*/)!.invalid as any) /*236,249*/) /*202,249*/) && (((ctx).submitted /*253,262*/) /*253,262*/) /*202,262*/ /*ignore*/) {
                var _t17 = document.createElement("div") /*180,273*/;
            }
            var _t18 = _ctor1({ "ngIf": ((((((((((ctx).month /*310,315*/) /*310,315*/)!.invalid as any) /*310,324*/) && (((((ctx).year /*328,332*/) /*328,332*/)!.valid as any) /*328,339*/) /*310,339*/) && (((((ctx).day /*343,346*/) /*343,346*/)!.valid as any) /*343,353*/) /*310,353*/) && (((ctx).submitted /*357,366*/) /*357,366*/) /*310,366*/) as any)) /*303,367*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*288,377*/;
            var _t19: any = (null!);
            if ((((((((ctx).month /*310,315*/) /*310,315*/)!.invalid as any) /*310,324*/) && (((((ctx).year /*328,332*/) /*328,332*/)!.valid as any) /*328,339*/) /*310,339*/) && (((((ctx).day /*343,346*/) /*343,346*/)!.valid as any) /*343,353*/) /*310,353*/) && (((ctx).submitted /*357,366*/) /*357,366*/) /*310,366*/ /*ignore*/) {
                var _t20 = document.createElement("div") /*288,377*/;
            }
            var _t21 = _ctor1({ "ngIf": ((((((((((ctx).month /*414,419*/) /*414,419*/)!.invalid as any) /*414,428*/) && (((((ctx).year /*432,436*/) /*432,436*/)!.invalid as any) /*432,445*/) /*414,445*/) && (((((ctx).day /*449,452*/) /*449,452*/)!.valid as any) /*449,459*/) /*414,459*/) && (((ctx).submitted /*463,472*/) /*463,472*/) /*414,472*/) as any)) /*407,473*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*392,483*/;
            var _t22: any = (null!);
            if ((((((((ctx).month /*414,419*/) /*414,419*/)!.invalid as any) /*414,428*/) && (((((ctx).year /*432,436*/) /*432,436*/)!.invalid as any) /*432,445*/) /*414,445*/) && (((((ctx).day /*449,452*/) /*449,452*/)!.valid as any) /*449,459*/) /*414,459*/) && (((ctx).submitted /*463,472*/) /*463,472*/) /*414,472*/ /*ignore*/) {
                var _t23 = document.createElement("div") /*392,483*/;
            }
            var _t24 = _ctor1({ "ngIf": ((((((((((ctx).month /*520,525*/) /*520,525*/)!.invalid as any) /*520,534*/) && (((((ctx).day /*538,541*/) /*538,541*/)!.invalid as any) /*538,550*/) /*520,550*/) && (((((ctx).year /*554,558*/) /*554,558*/)!.valid as any) /*554,565*/) /*520,565*/) && (((ctx).submitted /*569,578*/) /*569,578*/) /*520,578*/) as any)) /*513,579*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*498,589*/;
            var _t25: any = (null!);
            if ((((((((ctx).month /*520,525*/) /*520,525*/)!.invalid as any) /*520,534*/) && (((((ctx).day /*538,541*/) /*538,541*/)!.invalid as any) /*538,550*/) /*520,550*/) && (((((ctx).year /*554,558*/) /*554,558*/)!.valid as any) /*554,565*/) /*520,565*/) && (((ctx).submitted /*569,578*/) /*569,578*/) /*520,578*/ /*ignore*/) {
                var _t26 = document.createElement("div") /*498,589*/;
            }
            var _t27 = _ctor1({ "ngIf": ((((((((((ctx).month /*626,631*/) /*626,631*/)!.valid as any) /*626,638*/) && (((((ctx).day /*642,645*/) /*642,645*/)!.invalid as any) /*642,654*/) /*626,654*/) && (((((ctx).year /*658,662*/) /*658,662*/)!.invalid as any) /*658,671*/) /*626,671*/) && (((ctx).submitted /*675,684*/) /*675,684*/) /*626,684*/) as any)) /*619,685*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*604,695*/;
            var _t28: any = (null!);
            if ((((((((ctx).month /*626,631*/) /*626,631*/)!.valid as any) /*626,638*/) && (((((ctx).day /*642,645*/) /*642,645*/)!.invalid as any) /*642,654*/) /*626,654*/) && (((((ctx).year /*658,662*/) /*658,662*/)!.invalid as any) /*658,671*/) /*626,671*/) && (((ctx).submitted /*675,684*/) /*675,684*/) /*626,684*/ /*ignore*/) {
                var _t29 = document.createElement("div") /*604,695*/;
            }
            var _t30 = _ctor1({ "ngIf": ((((((((((ctx).month /*732,737*/) /*732,737*/)!.valid as any) /*732,744*/) && (((((ctx).day /*748,751*/) /*748,751*/)!.valid as any) /*748,758*/) /*732,758*/) && (((((ctx).year /*762,766*/) /*762,766*/)!.invalid as any) /*762,775*/) /*732,775*/) && (((ctx).submitted /*779,788*/) /*779,788*/) /*732,788*/) as any)) /*725,789*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*710,799*/;
            var _t31: any = (null!);
            if ((((((((ctx).month /*732,737*/) /*732,737*/)!.valid as any) /*732,744*/) && (((((ctx).day /*748,751*/) /*748,751*/)!.valid as any) /*748,758*/) /*732,758*/) && (((((ctx).year /*762,766*/) /*762,766*/)!.invalid as any) /*762,775*/) /*732,775*/) && (((ctx).submitted /*779,788*/) /*779,788*/) /*732,788*/ /*ignore*/) {
                var _t32 = document.createElement("div") /*710,799*/;
            }
            var _t33 = _ctor1({ "ngIf": ((((((((((ctx).month /*836,841*/) /*836,841*/)!.valid as any) /*836,848*/) && (((((ctx).year /*852,856*/) /*852,856*/)!.valid as any) /*852,863*/) /*836,863*/) && (((((ctx).day /*867,870*/) /*867,870*/)!.invalid as any) /*867,879*/) /*836,879*/) && (((ctx).submitted /*883,892*/) /*883,892*/) /*836,892*/) as any)) /*829,893*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*814,903*/;
            var _t34: any = (null!);
            if ((((((((ctx).month /*836,841*/) /*836,841*/)!.valid as any) /*836,848*/) && (((((ctx).year /*852,856*/) /*852,856*/)!.valid as any) /*852,863*/) /*836,863*/) && (((((ctx).day /*867,870*/) /*867,870*/)!.invalid as any) /*867,879*/) /*836,879*/) && (((ctx).submitted /*883,892*/) /*883,892*/) /*836,892*/ /*ignore*/) {
                var _t35 = document.createElement("div") /*814,903*/;
            }
        }
        var _t36 = _ctor1({ "ngIf": ((((ctx).view /*956,960*/) /*956,960*/ as any)) /*949,961*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*944,962*/;
        var _t37: any = (null!);
        if (((ctx).view /*956,960*/) /*956,960*/ /*ignore*/) {
            var _t38 = document.createElement("div") /*944,962*/;
        }
    }
    var _t39 = _ctor1({ "ngIf": ((((ctx).readOnly /*1007,1015*/) /*1007,1015*/ as any)) /*1000,1016*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*991,1017*/;
    var _t40: any = (null!);
    if (((ctx).readOnly /*1007,1015*/) /*1007,1015*/ /*ignore*/) {
        var _t41 = document.createElement("section") /*991,1017*/;
    }
} }

10.1.6 TCB

const _ctor1: <T = unknown>(init: Pick<i1.NgIf<T>, "ngIf" | "ngIfThen" | "ngIfElse">) => i1.NgIf<T> = (null!);

/*tcb1*/
function _tcb1(ctx: i0.AppComponent) { if (true) {
    var _t1 = _ctor1({ "ngIf": (((!(((ctx).readOnly /*17,25*/) /*17,25*/) /*16,25*/) as any)) /*9,26*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
    _t1.ngIf = (((!(((ctx).readOnly /*17,25*/) /*17,25*/) /*16,25*/) as any)) /*9,26*/;
    var _t2: any = (null!);
    if (!(((ctx).readOnly /*17,25*/) /*17,25*/) /*16,25*/ /*ignore*/) {
        var _t3 = _ctor1({ "ngIf": (((!(((ctx).view /*43,47*/) /*43,47*/) /*42,47*/) as any)) /*35,48*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
        _t3.ngIf = (((!(((ctx).view /*43,47*/) /*43,47*/) /*42,47*/) as any)) /*35,48*/;
        var _t4: any = (null!);
        var _t5: i2.FormGroupDirective = (null!);
        _t5.form = ((((ctx).formGroup /*77,86*/) /*77,86*/ as any)) /*64,87*/;
        var _t6 = _ctor1({ "ngIf": (((((((((ctx).month /*122,127*/) /*122,127*/)!.invalid as any) /*122,136*/) || (((((ctx).day /*140,143*/) /*140,143*/)!.invalid as any) /*140,152*/) /*122,152*/) || (((((ctx).year /*156,160*/) /*156,160*/)!.invalid as any) /*156,169*/) /*122,169*/) as any)) /*115,170*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
        _t6.ngIf = (((((((((ctx).month /*122,127*/) /*122,127*/)!.invalid as any) /*122,136*/) || (((((ctx).day /*140,143*/) /*140,143*/)!.invalid as any) /*140,152*/) /*122,152*/) || (((((ctx).year /*156,160*/) /*156,160*/)!.invalid as any) /*156,169*/) /*122,169*/) as any)) /*115,170*/;
        var _t7: any = (null!);
        if (((((((ctx).month /*122,127*/) /*122,127*/)!.invalid as any) /*122,136*/) || (((((ctx).day /*140,143*/) /*140,143*/)!.invalid as any) /*140,152*/) /*122,152*/) || (((((ctx).year /*156,160*/) /*156,160*/)!.invalid as any) /*156,169*/) /*122,169*/ /*ignore*/) {
            var _t8 = _ctor1({ "ngIf": ((((((((((ctx).month /*202,207*/) /*202,207*/)!.invalid as any) /*202,216*/) && (((((ctx).day /*220,223*/) /*220,223*/)!.invalid as any) /*220,232*/) /*202,232*/) && (((((ctx).year /*236,240*/) /*236,240*/)!.invalid as any) /*236,249*/) /*202,249*/) && (((ctx).submitted /*253,262*/) /*253,262*/) /*202,262*/) as any)) /*195,263*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t8.ngIf = ((((((((((ctx).month /*202,207*/) /*202,207*/)!.invalid as any) /*202,216*/) && (((((ctx).day /*220,223*/) /*220,223*/)!.invalid as any) /*220,232*/) /*202,232*/) && (((((ctx).year /*236,240*/) /*236,240*/)!.invalid as any) /*236,249*/) /*202,249*/) && (((ctx).submitted /*253,262*/) /*253,262*/) /*202,262*/) as any)) /*195,263*/;
            var _t9: any = (null!);
            var _t10 = _ctor1({ "ngIf": ((((((((((ctx).month /*310,315*/) /*310,315*/)!.invalid as any) /*310,324*/) && (((((ctx).year /*328,332*/) /*328,332*/)!.valid as any) /*328,339*/) /*310,339*/) && (((((ctx).day /*343,346*/) /*343,346*/)!.valid as any) /*343,353*/) /*310,353*/) && (((ctx).submitted /*357,366*/) /*357,366*/) /*310,366*/) as any)) /*303,367*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t10.ngIf = ((((((((((ctx).month /*310,315*/) /*310,315*/)!.invalid as any) /*310,324*/) && (((((ctx).year /*328,332*/) /*328,332*/)!.valid as any) /*328,339*/) /*310,339*/) && (((((ctx).day /*343,346*/) /*343,346*/)!.valid as any) /*343,353*/) /*310,353*/) && (((ctx).submitted /*357,366*/) /*357,366*/) /*310,366*/) as any)) /*303,367*/;
            var _t11: any = (null!);
            var _t12 = _ctor1({ "ngIf": ((((((((((ctx).month /*414,419*/) /*414,419*/)!.invalid as any) /*414,428*/) && (((((ctx).year /*432,436*/) /*432,436*/)!.invalid as any) /*432,445*/) /*414,445*/) && (((((ctx).day /*449,452*/) /*449,452*/)!.valid as any) /*449,459*/) /*414,459*/) && (((ctx).submitted /*463,472*/) /*463,472*/) /*414,472*/) as any)) /*407,473*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t12.ngIf = ((((((((((ctx).month /*414,419*/) /*414,419*/)!.invalid as any) /*414,428*/) && (((((ctx).year /*432,436*/) /*432,436*/)!.invalid as any) /*432,445*/) /*414,445*/) && (((((ctx).day /*449,452*/) /*449,452*/)!.valid as any) /*449,459*/) /*414,459*/) && (((ctx).submitted /*463,472*/) /*463,472*/) /*414,472*/) as any)) /*407,473*/;
            var _t13: any = (null!);
            var _t14 = _ctor1({ "ngIf": ((((((((((ctx).month /*520,525*/) /*520,525*/)!.invalid as any) /*520,534*/) && (((((ctx).day /*538,541*/) /*538,541*/)!.invalid as any) /*538,550*/) /*520,550*/) && (((((ctx).year /*554,558*/) /*554,558*/)!.valid as any) /*554,565*/) /*520,565*/) && (((ctx).submitted /*569,578*/) /*569,578*/) /*520,578*/) as any)) /*513,579*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t14.ngIf = ((((((((((ctx).month /*520,525*/) /*520,525*/)!.invalid as any) /*520,534*/) && (((((ctx).day /*538,541*/) /*538,541*/)!.invalid as any) /*538,550*/) /*520,550*/) && (((((ctx).year /*554,558*/) /*554,558*/)!.valid as any) /*554,565*/) /*520,565*/) && (((ctx).submitted /*569,578*/) /*569,578*/) /*520,578*/) as any)) /*513,579*/;
            var _t15: any = (null!);
            var _t16 = _ctor1({ "ngIf": ((((((((((ctx).month /*626,631*/) /*626,631*/)!.valid as any) /*626,638*/) && (((((ctx).day /*642,645*/) /*642,645*/)!.invalid as any) /*642,654*/) /*626,654*/) && (((((ctx).year /*658,662*/) /*658,662*/)!.invalid as any) /*658,671*/) /*626,671*/) && (((ctx).submitted /*675,684*/) /*675,684*/) /*626,684*/) as any)) /*619,685*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t16.ngIf = ((((((((((ctx).month /*626,631*/) /*626,631*/)!.valid as any) /*626,638*/) && (((((ctx).day /*642,645*/) /*642,645*/)!.invalid as any) /*642,654*/) /*626,654*/) && (((((ctx).year /*658,662*/) /*658,662*/)!.invalid as any) /*658,671*/) /*626,671*/) && (((ctx).submitted /*675,684*/) /*675,684*/) /*626,684*/) as any)) /*619,685*/;
            var _t17: any = (null!);
            var _t18 = _ctor1({ "ngIf": ((((((((((ctx).month /*732,737*/) /*732,737*/)!.valid as any) /*732,744*/) && (((((ctx).day /*748,751*/) /*748,751*/)!.valid as any) /*748,758*/) /*732,758*/) && (((((ctx).year /*762,766*/) /*762,766*/)!.invalid as any) /*762,775*/) /*732,775*/) && (((ctx).submitted /*779,788*/) /*779,788*/) /*732,788*/) as any)) /*725,789*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t18.ngIf = ((((((((((ctx).month /*732,737*/) /*732,737*/)!.valid as any) /*732,744*/) && (((((ctx).day /*748,751*/) /*748,751*/)!.valid as any) /*748,758*/) /*732,758*/) && (((((ctx).year /*762,766*/) /*762,766*/)!.invalid as any) /*762,775*/) /*732,775*/) && (((ctx).submitted /*779,788*/) /*779,788*/) /*732,788*/) as any)) /*725,789*/;
            var _t19: any = (null!);
            var _t20 = _ctor1({ "ngIf": ((((((((((ctx).month /*836,841*/) /*836,841*/)!.valid as any) /*836,848*/) && (((((ctx).year /*852,856*/) /*852,856*/)!.valid as any) /*852,863*/) /*836,863*/) && (((((ctx).day /*867,870*/) /*867,870*/)!.invalid as any) /*867,879*/) /*836,879*/) && (((ctx).submitted /*883,892*/) /*883,892*/) /*836,892*/) as any)) /*829,893*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t20.ngIf = ((((((((((ctx).month /*836,841*/) /*836,841*/)!.valid as any) /*836,848*/) && (((((ctx).year /*852,856*/) /*852,856*/)!.valid as any) /*852,863*/) /*836,863*/) && (((((ctx).day /*867,870*/) /*867,870*/)!.invalid as any) /*867,879*/) /*836,879*/) && (((ctx).submitted /*883,892*/) /*883,892*/) /*836,892*/) as any)) /*829,893*/;
            var _t21: any = (null!);
        }
        var _t22 = _ctor1({ "ngIf": ((((ctx).view /*956,960*/) /*956,960*/ as any)) /*949,961*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
        _t22.ngIf = ((((ctx).view /*956,960*/) /*956,960*/ as any)) /*949,961*/;
        var _t23: any = (null!);
    }
    var _t24 = _ctor1({ "ngIf": ((((ctx).readOnly /*1007,1015*/) /*1007,1015*/ as any)) /*1000,1016*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
    _t24.ngIf = ((((ctx).readOnly /*1007,1015*/) /*1007,1015*/ as any)) /*1000,1016*/;
    var _t25: any = (null!);
} }

But there is something in there that makes TypeScript choke:

[JoostK]

In particular, it's this change: 1388c17. Reverting that locally generates more TCB:

10.1.6 patched

const _ctor1: <T = unknown>(init: Pick<i1.NgIf<T>, "ngIf" | "ngIfThen" | "ngIfElse">) => i1.NgIf<T> = (null!);

/*tcb1*/
function _tcb1(ctx: i0.AppComponent) { if (true) {
    var _t1 = _ctor1({ "ngIf": (((!(((ctx).readOnly /*17,25*/) /*17,25*/) /*16,25*/) as any)) /*9,26*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
    _t1.ngIf = (((!(((ctx).readOnly /*17,25*/) /*17,25*/) /*16,25*/) as any)) /*9,26*/;
    var _t2: any = (null!);
    if (!(((ctx).readOnly /*17,25*/) /*17,25*/) /*16,25*/ /*ignore*/) {
        var _t3 = _ctor1({ "ngIf": (((!(((ctx).view /*43,47*/) /*43,47*/) /*42,47*/) as any)) /*35,48*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
        _t3.ngIf = (((!(((ctx).view /*43,47*/) /*43,47*/) /*42,47*/) as any)) /*35,48*/;
        var _t4: any = (null!);
        if (!(((ctx).view /*43,47*/) /*43,47*/) /*42,47*/ /*ignore*/) { }
        var _t5: i2.FormGroupDirective = (null!);
        _t5.form = ((((ctx).formGroup /*77,86*/) /*77,86*/ as any)) /*64,87*/;
        var _t6 = _ctor1({ "ngIf": (((((((((ctx).month /*122,127*/) /*122,127*/)!.invalid as any) /*122,136*/) || (((((ctx).day /*140,143*/) /*140,143*/)!.invalid as any) /*140,152*/) /*122,152*/) || (((((ctx).year /*156,160*/) /*156,160*/)!.invalid as any) /*156,169*/) /*122,169*/) as any)) /*115,170*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
        _t6.ngIf = (((((((((ctx).month /*122,127*/) /*122,127*/)!.invalid as any) /*122,136*/) || (((((ctx).day /*140,143*/) /*140,143*/)!.invalid as any) /*140,152*/) /*122,152*/) || (((((ctx).year /*156,160*/) /*156,160*/)!.invalid as any) /*156,169*/) /*122,169*/) as any)) /*115,170*/;
        var _t7: any = (null!);
        if (((((((ctx).month /*122,127*/) /*122,127*/)!.invalid as any) /*122,136*/) || (((((ctx).day /*140,143*/) /*140,143*/)!.invalid as any) /*140,152*/) /*122,152*/) || (((((ctx).year /*156,160*/) /*156,160*/)!.invalid as any) /*156,169*/) /*122,169*/ /*ignore*/) {
            var _t8 = _ctor1({ "ngIf": ((((((((((ctx).month /*202,207*/) /*202,207*/)!.invalid as any) /*202,216*/) && (((((ctx).day /*220,223*/) /*220,223*/)!.invalid as any) /*220,232*/) /*202,232*/) && (((((ctx).year /*236,240*/) /*236,240*/)!.invalid as any) /*236,249*/) /*202,249*/) && (((ctx).submitted /*253,262*/) /*253,262*/) /*202,262*/) as any)) /*195,263*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t8.ngIf = ((((((((((ctx).month /*202,207*/) /*202,207*/)!.invalid as any) /*202,216*/) && (((((ctx).day /*220,223*/) /*220,223*/)!.invalid as any) /*220,232*/) /*202,232*/) && (((((ctx).year /*236,240*/) /*236,240*/)!.invalid as any) /*236,249*/) /*202,249*/) && (((ctx).submitted /*253,262*/) /*253,262*/) /*202,262*/) as any)) /*195,263*/;
            var _t9: any = (null!);
            if ((((((((ctx).month /*202,207*/) /*202,207*/)!.invalid as any) /*202,216*/) && (((((ctx).day /*220,223*/) /*220,223*/)!.invalid as any) /*220,232*/) /*202,232*/) && (((((ctx).year /*236,240*/) /*236,240*/)!.invalid as any) /*236,249*/) /*202,249*/) && (((ctx).submitted /*253,262*/) /*253,262*/) /*202,262*/ /*ignore*/) { }
            var _t10 = _ctor1({ "ngIf": ((((((((((ctx).month /*310,315*/) /*310,315*/)!.invalid as any) /*310,324*/) && (((((ctx).year /*328,332*/) /*328,332*/)!.valid as any) /*328,339*/) /*310,339*/) && (((((ctx).day /*343,346*/) /*343,346*/)!.valid as any) /*343,353*/) /*310,353*/) && (((ctx).submitted /*357,366*/) /*357,366*/) /*310,366*/) as any)) /*303,367*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t10.ngIf = ((((((((((ctx).month /*310,315*/) /*310,315*/)!.invalid as any) /*310,324*/) && (((((ctx).year /*328,332*/) /*328,332*/)!.valid as any) /*328,339*/) /*310,339*/) && (((((ctx).day /*343,346*/) /*343,346*/)!.valid as any) /*343,353*/) /*310,353*/) && (((ctx).submitted /*357,366*/) /*357,366*/) /*310,366*/) as any)) /*303,367*/;
            var _t11: any = (null!);
            if ((((((((ctx).month /*310,315*/) /*310,315*/)!.invalid as any) /*310,324*/) && (((((ctx).year /*328,332*/) /*328,332*/)!.valid as any) /*328,339*/) /*310,339*/) && (((((ctx).day /*343,346*/) /*343,346*/)!.valid as any) /*343,353*/) /*310,353*/) && (((ctx).submitted /*357,366*/) /*357,366*/) /*310,366*/ /*ignore*/) { }
            var _t12 = _ctor1({ "ngIf": ((((((((((ctx).month /*414,419*/) /*414,419*/)!.invalid as any) /*414,428*/) && (((((ctx).year /*432,436*/) /*432,436*/)!.invalid as any) /*432,445*/) /*414,445*/) && (((((ctx).day /*449,452*/) /*449,452*/)!.valid as any) /*449,459*/) /*414,459*/) && (((ctx).submitted /*463,472*/) /*463,472*/) /*414,472*/) as any)) /*407,473*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t12.ngIf = ((((((((((ctx).month /*414,419*/) /*414,419*/)!.invalid as any) /*414,428*/) && (((((ctx).year /*432,436*/) /*432,436*/)!.invalid as any) /*432,445*/) /*414,445*/) && (((((ctx).day /*449,452*/) /*449,452*/)!.valid as any) /*449,459*/) /*414,459*/) && (((ctx).submitted /*463,472*/) /*463,472*/) /*414,472*/) as any)) /*407,473*/;
            var _t13: any = (null!);
            if ((((((((ctx).month /*414,419*/) /*414,419*/)!.invalid as any) /*414,428*/) && (((((ctx).year /*432,436*/) /*432,436*/)!.invalid as any) /*432,445*/) /*414,445*/) && (((((ctx).day /*449,452*/) /*449,452*/)!.valid as any) /*449,459*/) /*414,459*/) && (((ctx).submitted /*463,472*/) /*463,472*/) /*414,472*/ /*ignore*/) { }
            var _t14 = _ctor1({ "ngIf": ((((((((((ctx).month /*520,525*/) /*520,525*/)!.invalid as any) /*520,534*/) && (((((ctx).day /*538,541*/) /*538,541*/)!.invalid as any) /*538,550*/) /*520,550*/) && (((((ctx).year /*554,558*/) /*554,558*/)!.valid as any) /*554,565*/) /*520,565*/) && (((ctx).submitted /*569,578*/) /*569,578*/) /*520,578*/) as any)) /*513,579*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t14.ngIf = ((((((((((ctx).month /*520,525*/) /*520,525*/)!.invalid as any) /*520,534*/) && (((((ctx).day /*538,541*/) /*538,541*/)!.invalid as any) /*538,550*/) /*520,550*/) && (((((ctx).year /*554,558*/) /*554,558*/)!.valid as any) /*554,565*/) /*520,565*/) && (((ctx).submitted /*569,578*/) /*569,578*/) /*520,578*/) as any)) /*513,579*/;
            var _t15: any = (null!);
            if ((((((((ctx).month /*520,525*/) /*520,525*/)!.invalid as any) /*520,534*/) && (((((ctx).day /*538,541*/) /*538,541*/)!.invalid as any) /*538,550*/) /*520,550*/) && (((((ctx).year /*554,558*/) /*554,558*/)!.valid as any) /*554,565*/) /*520,565*/) && (((ctx).submitted /*569,578*/) /*569,578*/) /*520,578*/ /*ignore*/) { }
            var _t16 = _ctor1({ "ngIf": ((((((((((ctx).month /*626,631*/) /*626,631*/)!.valid as any) /*626,638*/) && (((((ctx).day /*642,645*/) /*642,645*/)!.invalid as any) /*642,654*/) /*626,654*/) && (((((ctx).year /*658,662*/) /*658,662*/)!.invalid as any) /*658,671*/) /*626,671*/) && (((ctx).submitted /*675,684*/) /*675,684*/) /*626,684*/) as any)) /*619,685*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t16.ngIf = ((((((((((ctx).month /*626,631*/) /*626,631*/)!.valid as any) /*626,638*/) && (((((ctx).day /*642,645*/) /*642,645*/)!.invalid as any) /*642,654*/) /*626,654*/) && (((((ctx).year /*658,662*/) /*658,662*/)!.invalid as any) /*658,671*/) /*626,671*/) && (((ctx).submitted /*675,684*/) /*675,684*/) /*626,684*/) as any)) /*619,685*/;
            var _t17: any = (null!);
            if ((((((((ctx).month /*626,631*/) /*626,631*/)!.valid as any) /*626,638*/) && (((((ctx).day /*642,645*/) /*642,645*/)!.invalid as any) /*642,654*/) /*626,654*/) && (((((ctx).year /*658,662*/) /*658,662*/)!.invalid as any) /*658,671*/) /*626,671*/) && (((ctx).submitted /*675,684*/) /*675,684*/) /*626,684*/ /*ignore*/) { }
            var _t18 = _ctor1({ "ngIf": ((((((((((ctx).month /*732,737*/) /*732,737*/)!.valid as any) /*732,744*/) && (((((ctx).day /*748,751*/) /*748,751*/)!.valid as any) /*748,758*/) /*732,758*/) && (((((ctx).year /*762,766*/) /*762,766*/)!.invalid as any) /*762,775*/) /*732,775*/) && (((ctx).submitted /*779,788*/) /*779,788*/) /*732,788*/) as any)) /*725,789*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t18.ngIf = ((((((((((ctx).month /*732,737*/) /*732,737*/)!.valid as any) /*732,744*/) && (((((ctx).day /*748,751*/) /*748,751*/)!.valid as any) /*748,758*/) /*732,758*/) && (((((ctx).year /*762,766*/) /*762,766*/)!.invalid as any) /*762,775*/) /*732,775*/) && (((ctx).submitted /*779,788*/) /*779,788*/) /*732,788*/) as any)) /*725,789*/;
            var _t19: any = (null!);
            if ((((((((ctx).month /*732,737*/) /*732,737*/)!.valid as any) /*732,744*/) && (((((ctx).day /*748,751*/) /*748,751*/)!.valid as any) /*748,758*/) /*732,758*/) && (((((ctx).year /*762,766*/) /*762,766*/)!.invalid as any) /*762,775*/) /*732,775*/) && (((ctx).submitted /*779,788*/) /*779,788*/) /*732,788*/ /*ignore*/) { }
            var _t20 = _ctor1({ "ngIf": ((((((((((ctx).month /*836,841*/) /*836,841*/)!.valid as any) /*836,848*/) && (((((ctx).year /*852,856*/) /*852,856*/)!.valid as any) /*852,863*/) /*836,863*/) && (((((ctx).day /*867,870*/) /*867,870*/)!.invalid as any) /*867,879*/) /*836,879*/) && (((ctx).submitted /*883,892*/) /*883,892*/) /*836,892*/) as any)) /*829,893*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
            _t20.ngIf = ((((((((((ctx).month /*836,841*/) /*836,841*/)!.valid as any) /*836,848*/) && (((((ctx).year /*852,856*/) /*852,856*/)!.valid as any) /*852,863*/) /*836,863*/) && (((((ctx).day /*867,870*/) /*867,870*/)!.invalid as any) /*867,879*/) /*836,879*/) && (((ctx).submitted /*883,892*/) /*883,892*/) /*836,892*/) as any)) /*829,893*/;
            var _t21: any = (null!);
            if ((((((((ctx).month /*836,841*/) /*836,841*/)!.valid as any) /*836,848*/) && (((((ctx).year /*852,856*/) /*852,856*/)!.valid as any) /*852,863*/) /*836,863*/) && (((((ctx).day /*867,870*/) /*867,870*/)!.invalid as any) /*867,879*/) /*836,879*/) && (((ctx).submitted /*883,892*/) /*883,892*/) /*836,892*/ /*ignore*/) { }
        }
        var _t22 = _ctor1({ "ngIf": ((((ctx).view /*956,960*/) /*956,960*/ as any)) /*949,961*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
        _t22.ngIf = ((((ctx).view /*956,960*/) /*956,960*/ as any)) /*949,961*/;
        var _t23: any = (null!);
        if (((ctx).view /*956,960*/) /*956,960*/ /*ignore*/) { }
    }
    var _t24 = _ctor1({ "ngIf": ((((ctx).readOnly /*1007,1015*/) /*1007,1015*/ as any)) /*1000,1016*/, "ngIfThen": (null as any), "ngIfElse": (null as any) }) /*ignore*/;
    _t24.ngIf = ((((ctx).readOnly /*1007,1015*/) /*1007,1015*/ as any)) /*1000,1016*/;
    var _t25: any = (null!);
    if (((ctx).readOnly /*1007,1015*/) /*1007,1015*/ /*ignore*/) { }
} }

But that one is just as quick as it was in 10.0.14. Which is quite the opposite of what I was seeing when implementing that change. I'll definitely have to dive deeper into TypeScript to understand what is going on here.

For the record: I did also test with Angular 10.1.6 and TypeScript 3.9.7 but then the slowdown still occurs, so it's not caused by a change in TS version. Updating to typescript@next (4.1.0-dev.20201014) is just as slow.

[JoostK]

This definitely looks like a bug in TypeScript.

Slow

<section *ngIf="!readOnly">
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
</section>

<section *ngIf="readOnly"></section>

Fast (last *ngIf commented out)

<section *ngIf="!readOnly">
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
        <div *ngIf="month?.invalid && submitted"></div>
</section>

<!-- <section *ngIf="readOnly"></section> -->

Fast (submitted replaced with day?.invalid, but last *ngIf enabled) ^{(how is this fast and the first one isn't?!)}

<section *ngIf="!readOnly">
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
        <div *ngIf="month?.invalid && day?.invalid"></div>
</section>

<section *ngIf="readOnly"></section>

Surprisingly, the slow case becomes fast when the TCB contains the additional if-statements that were optimized out in 1388c17.

[x87]

We also observed that the TS type checker is stuck at getTypeAtFlowNode during ng build. As a matter of experiment reducing the default flowDepth from 2000 to 40 eliminates the build slowness.

[JoostK]

I reported this in microsoft/TypeScript#41124.

[petebacondarwin]

I've assigned this a P3 priority but since it appears to be an upstream issue with TypeScript, I wonder if there is anything we can do. In which case, should we just close this?

[JoostK]

@petebacondarwin We could revert 1388c17 as that magically avoids the issue, but I'd like to get a reply on microsoft/TypeScript#41124 to determine how to proceed here.

[petebacondarwin]

OK great!