AnimationPlayer sometimes throws #26095
Description
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
Current behavior
I wanted my directive plays an animation on host element while certain conditions met. To iterate animation, I shortly played with animation-iteration-count with no success, managed to make it work using AnimationPlayer.play(), reset() and onDone(GitHub repo here).
But if it played an animation then the host component gets destroyed, it throws:
ERROR Error: Uncaught (in promise): Error: Unable to find the timeline player referenced by 1
Error: Unable to find the timeline player referenced by 1
at TimelineAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TimelineAnimationEngine._getPlayer (browser.js:2183)
at TimelineAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TimelineAnimationEngine.command (browser.js:2203)
at InjectableAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.AnimationEngine.process (browser.js:3786)
at AnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.AnimationRenderer.setProperty (animations.js:288)
at issueAnimationCommand (animations.js:96)
at RendererAnimationPlayer.push../node_modules/@angular/platform-browser/fesm5/animations.js.RendererAnimationPlayer._command (animations.js:75)
at RendererAnimationPlayer.push../node_modules/@angular/platform-browser/fesm5/animations.js.RendererAnimationPlayer.reset (animations.js:90)
at NgIdleClickDirective.push../dist/ng-idle-click/fesm5/ng-idle-click.js.NgIdleClickDirective.playDefaultAnimation (ng-idle-click.js:165)
at NgIdleClickDirective.animationDone (ng-idle-click.js:78)
at animations.js:172
at TimelineAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TimelineAnimationEngine._getPlayer (browser.js:2183)
at TimelineAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TimelineAnimationEngine.command (browser.js:2203)
at InjectableAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.AnimationEngine.process (browser.js:3786)
at AnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.AnimationRenderer.setProperty (animations.js:288)
at issueAnimationCommand (animations.js:96)
at RendererAnimationPlayer.push../node_modules/@angular/platform-browser/fesm5/animations.js.RendererAnimationPlayer._command (animations.js:75)
at RendererAnimationPlayer.push../node_modules/@angular/platform-browser/fesm5/animations.js.RendererAnimationPlayer.reset (animations.js:90)
at NgIdleClickDirective.push../dist/ng-idle-click/fesm5/ng-idle-click.js.NgIdleClickDirective.playDefaultAnimation (ng-idle-click.js:165)
at NgIdleClickDirective.animationDone (ng-idle-click.js:78)
at animations.js:172
at resolvePromise (zone.js:814)
at zone.js:877
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4053)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
at IDBRequest.globalZoneAwareCallback (zone.js:1566)
Expected behavior
AnimationPlayer didn't throw when a player is being reused by calling reset() / destroy() and play().
Minimal reproduction of the problem with instructions
Tried to reproduce on Stackblitz but couldn't (it didn't throw).
Could reproduce on live app by following steps below:
- Log in here
- On devtools' network tab, throttle with long latency, say 2.5s to make it animate
- Go into
Issuesgroup, add any note and save (button should be animated) - Click user photo and logout (should throw)
What is the motivation / use case for changing the behavior?
Environment
Angular version: 6.0.3
Browser:
- [x] Chrome (desktop) version 69
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: 8.11.2
- Platform: Windows
Others: