Using mdInput breaks router animation

[bob-lee]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] 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

Current behavior

Router animation fails due to errors on query(':enter') if the page uses material component like mdInput. Replacing mdInput with plain input gets back 'home => about' animation.

Expected behavior

Minimal reproduction of the problem with instructions

https://plnkr.co/edit/SY1g8KihCEjd5BAcDBk6?p=preview

What is the motivation / use case for changing the behavior?

Environment

Angular version: 4.2.4


Browser:
- [x ] Chrome (desktop) version 59
- [ ] 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: 6.10.0  
- Platform:  Windows 

Others:

[matsko]

Thank you @bob-lee for posting this and for providing a plnkr page. I will have a solution for this in the next two days.

[matsko]

@bob-lee #18210 will fix the issue. Here is your demo working with it: https://plnkr.co/edit/Rf0ZbWSht8qyjU0F29Jo?p=preview