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:
- 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.
- Add a master view with a child view.
- Inside the master view, add
IgxTabsComponent (Tabs Layout).
- Add navigation interaction on the second tab header (Navigate to Child View).
- 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.
Expected result
No errors.
Description
Originated from AppBuilder
e2e-story1.cy.ts. Introduced by #15397 and affects carousel, tabs, and stepper components.For
IgxCarouselandIgxSteppercomponents, when having a handler that calls the components'next()/prev()methods and changes the route, an error is thrown.ERROR RuntimeError: NG03301: Unable to find the timeline player referenced by 0It seems that in
carousel-base.ts(base class for carousel, stepper, tabs), theanimationEndevent is called afterngOnDestroy(where both players are destroyed, but not set tonull).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
enterAnimationPlayerandleaveAnimationPlayera 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
Steps to reproduce
To reproduce in App Builder:
IgxTabsComponent(Tabs Layout).Also reproducible in this sample.
ComponentsAnimationPlayer.zip
Result
An error is thrown for both
enterAnimationPlayerandleaveAnimationPlayer.Expected result
No errors.