💥 Angular Debugging - Part 1- Troubleshooting 'Expression Changed' Error

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

We are going to use the Chrome Dev Tools to identify what Angular template expression is causing the error, and we are going to understand what the problem exactly is, why the error message is helpful and how it ties back to the Angular Development mode.

Check out the Angular University Ebooks:

Follow us:

[berkanbilgin]

Im surprised that you didnt mention that we simply clicki the "CourseComponent.html" link in the error message on chrome browser which would directly take you to error line in HTML anyways! (instead of going through debugger, breakpoint, etc..)

[thirumanitheivarajan]

1) This error won't affect in PROD, right? So Can I skip the error in DEV also even it throws in console?
2) why the Angular again check the Change Detection 2nd time in DEV mode?
3) why the Angular doesn't check the Change Detection 2nd time in PROD mode?

[ttma]

Could you explain why the initial value is a object called `WrappedValue` instead of false?

[emesen_]

The error is pointed out in the error message:

"CourseComponent.html:13"

It even gives you the line number

[nieporadek]

I like "loading indicator" in the narration often sounds like "loathing indicator".
My loathing indicator for this error is definitely on :)

[stephaneislistening]

It would be nice if the video told us what it means to "be checked" for Angular

[Gimmiyimmy]

Great. I was struggling with this error. Hats Off for you :)