Skip to content

[AnimationPlayer]: throws error when playing an animation and chaning route #15976

@RivaIvanova

Description

@RivaIvanova

Description

Originated from AppBuilder e2e-story1.cy.ts. Introduced by #15397 and affects carousel, tabs, and stepper components.

For IgxCarousel and IgxStepper components, when having a handler that calls the components' next()/prev() methods and changes the route, an error is thrown.

<button igxButton="contained" (click)="clickCarouselButton()">Button</button>
<igx-carousel [navigation]="true" [loop]="false" #carousel>
  <igx-slide>
    <img src="/assets/WonderfulCoast.png" />
  </igx-slide>
  <igx-slide>
    <img src="/assets/GoldenBeaches.png" />
  </igx-slide>
</igx-carousel>
@ViewChild('carousel', { static: true, read: IgxCarouselComponent })
private carousel?: IgxCarouselComponent;

constructor(private router: Router) {}

public clickCarouselButton() {
  this.carousel?.next();
  this.router.navigate(['test']);
}

ERROR RuntimeError: NG03301: Unable to find the timeline player referenced by 0

It seems that in carousel-base.ts (base class for carousel, stepper, tabs), the animationEnd event is called after ngOnDestroy (where both players are destroyed, but not set to null).
https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/carousel-base.ts#L54

This results in an attempt to destroy the enterAnimationPlayer and leaveAnimationPlayer a second time.
https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/carousel-base.ts#L154
https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/carousel-base.ts#L177

  • igniteui-angular version: 19.2.x, 20.0.x
  • browser: any

Steps to reproduce

To reproduce in App Builder:

  1. Use this PR https://infragistics.visualstudio.com/Indigo_Platform/_git/AppBuilder/pullrequest/16899 or update @infragistics/igniteui-angular to be at least 19.2.x in AppBuilder.
  2. Add a master view with a child view.
  3. Inside the master view, add IgxTabsComponent (Tabs Layout).
  4. Add navigation interaction on the second tab header (Navigate to Child View).
  5. Open Preview and click the second tab header.

Also reproducible in this sample.

ComponentsAnimationPlayer.zip

Result

An error is thrown for both enterAnimationPlayer and leaveAnimationPlayer.

Image Image

Expected result

No errors.

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions