angular: Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for '@routeAnimations': 'undefined'. Current value: 'NewAnimationName'.

🐞 bug report

Affected Package

Not clear.

Possibly @angular/animations or @angular/router

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.3

Description

Using route animation with a parent element that is conditionally hidden, causes ExpressionChangedAfterItHasBeenCheckedError. This did not happen in Angular 8.3. Began with Angular 9.

Possibly related to issue https://github.com/angular/angular/issues/34821.

Error occurs with

<div *ngIf="!mobileQuery.matches">
    <div [@routeAnimations]="prepareRoute(outlet)">
        <router-outlet #outlet="outlet"></router-outlet>
    </div>
</div>

No error occurs with

<div>
    <div [@routeAnimations]="prepareRoute(outlet)">
        <router-outlet #outlet="outlet"></router-outlet>
    </div>
</div>

🔬 Minimal Reproduction

Unable to recreate in stackblitz. See attached min repro project.

Steps:

Unzip attached project
Run npm install
Run ng serve --open=true
Navigate to /home URL
Open Developer tools, notice error

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 21
Comments: 17 (6 by maintainers)

Commits related to this issue

docs: remove activatedRouteData backward accesses in aio guides developers should not access the router-outlet directive in their template before defining a template variable for it, such implementat... — committed to dario-piotrowicz/angular by dario-piotrowicz 2 years ago
docs: remove activatedRouteData backward accesses in aio guides developers should not access the router-outlet directive in their template before defining a template variable for it, such implementat... — committed to dario-piotrowicz/angular by dario-piotrowicz 2 years ago
docs: remove activatedRouteData backward accesses in aio guides (#45140) developers should not access the router-outlet directive in their template before defining a template variable for it, such im... — committed to angular/angular by dario-piotrowicz 2 years ago

Most upvoted comments

Hi, did anyone find how to fix this ? Same problem as @acohenOT, error pops up when @routerAnimations directive is in a *ngIf.

Edit

Ok i found a fix that worked for me, kinda dirty but it works:

1- Inject changeRef service

constructor(private changeRef: ChangeDetectorRef) { } Implement AfterViewChecked interface

ngAfterViewChecked(): void { this.changeRef.detectChanges(); }

+30

hhsissi on Aug 27, 2020

This bug exists in Angular 10, as well.

acohenOT on Aug 8, 2020

I have the same issue in angular 9.1.

marcoripa96 on Apr 22, 2020

I found this https://angular.io/errors/NG0100

israeldesouza on Feb 10, 2021

I have the same issue. I think this is an important issue. The [hidden] attribute is a good substitute (sometimes) but if I need to wait for information before rendering the child routes, the ngif is really necessary. A resolver might work as well, but that simply doesn’t work for my use case all the time.

bhanna1693 on Jun 4, 2020