Please explain to me why I keep getting this error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Obviously, I only get it in dev mode, it doesn't happen on my production build, but it's very annoying and I simply don't understand the benefits of having an error in my dev environment that won't show up on prod --probably because of my lack of understanding.
Usually, the fix is easy enough, I just wrap the error causing code in a setTimeout like this:
setTimeout(()=> {
this.isLoading = true;
}, 0);
Or force detect changes with a constructor like this: constructor(private cd: ChangeDetectorRef) {}:
this.isLoading = true;
this.cd.detectChanges();
But why do I constantly run into this error? I want to understand it so I can avoid these hacky fixes in the future.
A lot of understanding came once I understood the Angular Lifecycle Hooks and their relationship with change detection.
I was trying to get Angular to update a global flag bound to the *ngIf of an element, and I was trying to change that flag inside of the ngOnInit() life cycle hook of another component.
According to the documentation, this method is called after Angular has already detected changes:
Called once, after the first ngOnChanges().
So updating the flag inside of ngOnChanges() won't initiate change detection. Then, once change detection has naturally triggered again, the flag's value has changed and the error is thrown.
In my case, I changed this:
constructor(private globalEventsService: GlobalEventsService) {
}
ngOnInit() {
this.globalEventsService.showCheckoutHeader = true;
}
To this:
constructor(private globalEventsService: GlobalEventsService) {
this.globalEventsService.showCheckoutHeader = true;
}
ngOnInit() {
}
and it fixed the problem :)