This is a notorious error, which has a quite a "following" among developers, however it is also known to be quite tricky to debug. The log like this

PersonalSituationComponent.html:3 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
at viewDebugError (core.es5.js:8434) [angular]
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412) [angular]
at checkBindingNoChanges (core.es5.js:8576) [angular]
at checkNoChangesNodeInline (core.es5.js:12455) [angular]
at checkNoChangesNode (core.es5.js:12429) [angular]
at debugCheckNoChangesNode (core.es5.js:13209) [angular]
at debugCheckRenderNodeFn (core.es5.js:13149) [angular]
at Object.eval [as updateRenderer] (PersonalSituationComponent.html:3) [angular]
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13131) [angular]
at checkNoChangesView (core.es5.js:12251) [angular]
at callViewAction (core.es5.js:12618) [angular]
at execEmbeddedViewsAction (core.es5.js:12596) [angular]
at checkNoChangesView (core.es5.js:12250) [angular]
at callViewAction (core.es5.js:12618) [angular]

is not really helpful. And if one takes a lot at the line 3 of the html, the line has no booleans in it, but it is an opening tag for a ponent which does have some of them at various places (.ts and .html respectively).

How would you debug such an error, without replacing all booleans with hardcoded values and checking each one of them separately? (And while you are typing, I am going to do just that).

This is a notorious error, which has a quite a "following" among developers, however it is also known to be quite tricky to debug. The log like this

PersonalSituationComponent.html:3 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
at viewDebugError (core.es5.js:8434) [angular]
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412) [angular]
at checkBindingNoChanges (core.es5.js:8576) [angular]
at checkNoChangesNodeInline (core.es5.js:12455) [angular]
at checkNoChangesNode (core.es5.js:12429) [angular]
at debugCheckNoChangesNode (core.es5.js:13209) [angular]
at debugCheckRenderNodeFn (core.es5.js:13149) [angular]
at Object.eval [as updateRenderer] (PersonalSituationComponent.html:3) [angular]
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13131) [angular]
at checkNoChangesView (core.es5.js:12251) [angular]
at callViewAction (core.es5.js:12618) [angular]
at execEmbeddedViewsAction (core.es5.js:12596) [angular]
at checkNoChangesView (core.es5.js:12250) [angular]
at callViewAction (core.es5.js:12618) [angular]

is not really helpful. And if one takes a lot at the line 3 of the html, the line has no booleans in it, but it is an opening tag for a ponent which does have some of them at various places (.ts and .html respectively).

How would you debug such an error, without replacing all booleans with hardcoded values and checking each one of them separately? (And while you are typing, I am going to do just that).

• javascript
• angular
• typescript
• debugging
• angular2-changedetection

• I know this is an old thread but I found the debugging of this to be the best blog.angular-university.io/angular-debugging. – AliF50 Commented Feb 17, 2021 at 17:11

3 Answers 3

There are a lot of posts showing how to figure out the 'ExpressionChangedAfterItHasBeenCheckedError' error, however, a good starting point is reading this to understand what this error means: https://blog.angularindepth./everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

But, if you just want a lazy way of figuring this out, just start menting things out to find the culprit that's causing this error. Once you isolate the causing line, then perhaps post again with the specific error of "when I have this line I then get this error" etc. We might be able to help you out better then.

If you still don't want to do that, then once you find the problematic code then just try some of the things the munity usually remends:

• wrap your code with setTimeout (this is just a hack)
• run change detection detection as explained on another answer by @Milo
• make sure the child element is being properly destroyed

There are a lot of posts on this error and if you put a little more effort and give us a better picture of your code then we might be able to help you out better.

Good luck! :)

You have to literally debug, because currently angular does not provide any meaningful details except value.

If you set debugger option break on all errors you will be able to walk through stack (kinda obvious right?) and see ponent name where problem occurs.

You can run manual change detection on variable value changes that you suspect within the ponent until the error is resolved. Once you find it you can decide whether to re-design the implementation or just have the manual change detection run.

import { ChangeDetectorRef } from '@angular/core';

constructor(private _cdRef: ChangeDetectorRef) { }

this._cdRef.detectChanges();