Yet another ExpressionChangedAfterItHasBeenCheckedError

🐞 bug report

Affected Package

The issue is caused by package @angular/core (?)

Is this a regression?

I had a similar "flow" in an Angular v8 project and didn't encounter the bug but I'm not sure at all as this bug appeared on a brand new project.

Description

When switching a mat-progress bar mode according to a boolean (or by displaying one or another progress bar with *ngIf), the following error pops in the console, either when loading the app or changing route:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mode: determinate'. Current value: 'mode: indeterminate'.

(or this one for the *ngIf version: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'. )

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-t7ecan?file=src%2Fapp%2Fprogress-bar-test.html

🔥 Exception or Error

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mode: determinate'. Current value: 'mode: indeterminate'.
    at viewDebugError (errors.ts:38)
    at expressionChangedAfterItHasBeenCheckedError (errors.ts:24)
    at checkBindingNoChanges (util.ts:104)
    at checkNoChangesNodeInline (view.ts:485)
    at checkNoChangesNode (view.ts:472)
    at debugCheckNoChangesNode (services.ts:468)
    at debugCheckDirectivesFn (services.ts:396)
    at Object.eval [as updateDirectives] (VM28592 ProgressBarTest.ngfactory.js:47)
    at Object.debugUpdateDirectives [as updateDirectives] (services.ts:388)
    at checkNoChangesView (view.ts:352)

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.7
Node: 10.16.2
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.1.7
@angular-devkit/schematics        9.1.7
@angular/cdk                      9.2.4
@angular/cli                      9.1.7
@angular/material                 9.2.4
@ngtools/webpack                  9.1.7
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

Maybe it’s Material related?

[mlc-mlapis]

@Booster2ooo Sure, if you make it async, you always postpone the execution to another tick.

But your original problem is from 99% a symptom of an inappropriate logic in your code. Simply you shouldn’t make the change during one CD cycle - when the component and its childs are checked.

[Flusinerd]

The error seems to be caused by the following: The ngOnInit() in the child component gets called AFTER the view of the parent component has been checked already:

I added some console.logs to the example provided above and this is the result:

The return value log is from the loadingService.loading getter.

If I move this.loadingService.startLoading() into the parents ngOnInit then it is working, because it is changing before the view is checked.

The only solution I could think of is resolving this issue is using ChangeDetectorRef or by making sure, that Angular does not check the View before the ngOnInits of the child components have returned.