Repository: angular
Issue: AnimationPlayer sometimes throws
Labels: type: bug/fix,area: animations,freq2: medium,P4

<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] 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:
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->
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](https://github.com/bob-lee/ng-notes/blob/master/projects/ng-idle-click/src/lib/ng-idle-click.directive.ts#L84)).

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
<!-- Describe what the desired behavior would be. -->
[`AnimationPlayer`](https://github.com/angular/angular/blob/master/packages/animations/browser/src/render/timeline_animation_engine.ts#L107) didn't throw when a player is being reused by calling `reset()` / `destroy()` and `play()`.

## Minimal reproduction of the problem with instructions
<!--
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://stackblitz.com or similar (you can use this template as a starting point: https://stackblitz.com/fork/angular-gitter).
-->
Tried to reproduce on [Stackblitz](https://stackblitz.com/edit/angular-animation-player-destroy-issue?file=src%2Fapp%2Fapp.component.ts) but couldn't (it didn't throw).

Could reproduce on live app by following steps below:
1. Log in [here](https://ng-notes-abb75.firebaseapp.com/login)
2. On devtools' network tab, throttle with long latency, say 2.5s to make it animate
3. Go into `Issues` group, add any note and save (button should be animated)
4. Click user photo and logout (should throw)

## What is the motivation / use case for changing the behavior?
<!-- Describe the motivation or the concrete use case. -->


## Environment

<pre><code>
Angular version: 6.0.3
<!-- Check whether this is still an issue in the most recent Angular version -->

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  <!-- run `node --version` -->
- Platform:  Windows<!-- Mac, Linux, Windows -->

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>