Repository: angular
Issue: unexpected transition happened with router change after calling applicationRef.attachView 
Labels: type: bug/fix,area: animations,freq2: medium,area: router,state: confirmed,P4

<!--🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅

Oh hi there! 😄

To expedite issue processing please search open and closed issues before submitting a new one.
Existing issues often contain information about workarounds, resolution, or progress updates.

🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅-->


# 🐞 bug report

### Affected Package

`@angular/animations`
`@angular/router`

### Is this a regression?
no

### Description

The unexpected transition will happen when router change after attaching the component with the `applicationRef.attachView`


## 🔬 Minimal Reproduction
Angular 8.x: https://stackblitz.com/edit/angular-router-transition-bug?file=src/app/app.component.ts
Angular 9.0.0-rc.8: https://stackblitz.com/edit/github-va6d8q?file=src/app/app.component.ts

1. click the router link, you would find the unexpected transition happened
2. comment this line `this.applicationRef.attachView(view.hostView);`
3. click the router link again, you would find the transition won't happen anymore.

remove the `BrowserAnimationsModule` could also stop the transition bug, so maybe the `BrowserAnimationsModule` cause the root issue.  

## 🔥 Exception or Error

the unexpected transition happened when router change

![Kapture 2020-01-10 at 15 32 20](https://user-images.githubusercontent.com/1506722/72134234-72243600-33be-11ea-8249-687619966abe.gif)


## 🌍  Your Environment

**Angular Version:**

The bug still exists in the latest angular [version 9.0.0-rc.8](https://github.com/vthinkxie/ng-transition-bug), It breaks all transition style in our components after any overlay created with `@angular/cdk`

<pre><code>
@angular-devkit/architect         0.803.21
@angular-devkit/build-angular     0.803.21
@angular-devkit/build-optimizer   0.803.21
@angular-devkit/build-webpack     0.803.21
@angular-devkit/core              8.3.21
@angular-devkit/schematics        8.3.21
@angular/cdk                      8.2.3
@angular/cli                      8.3.21
@ngtools/webpack                  8.3.21
@schematics/angular               8.3.21
@schematics/update                0.803.21
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

</code></pre>

**Anything else relevant?**

I have debugged this issue with DOM breakpoint and find that the className was added in different sequence if there is an attached view, which caused this issue.


1. the transition className was added immediately after router change if there is **no attached view**, this is the expected behavior.
<img width="1465" alt="without-attach" src="https://user-images.githubusercontent.com/1506722/72401103-183cbb00-3786-11ea-8e38-2081dd137f27.png">

2. the transition className was not added after router change if **there is an attached view**, and the className was added in the next tick, which caused the unexpected transition.
this is not the expected behavior.
<img width="1467" alt="after-attched" src="https://user-images.githubusercontent.com/1506722/72401135-28ed3100-3786-11ea-8ada-a2d770c8a6f8.png">


Here is one [ng-zorro-antd bug](https://stackblitz.com/edit/ng-zorro-antd-start-qgr95a?file=src%2Fapp%2Fhome%2Fhome.component.html) caused by this issue

Hope it could be fixed before angular 9 release ref [@angular/cdk](https://github.com/angular/components/issues/14646)