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

RouteAnimationError.zip

🐞 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:

1. Unzip attached project
2. Run npm install
3. Run ng serve --open=true
4. Navigate to /home URL
5. Open Developer tools, notice error

[hhsissi]

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(); }

[acohenOT]

This bug exists in Angular 10, as well.