ServerModule + NoopAnimationsModule - Cannot read property 'display' of undefined at cloakElement

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

When prerendering application with animated components this error happens despite that NoopAnimationsModule is provided on server side instead of BrowserAnimationsModule. I use @angular/material but looking at this stack trace I believe it’s hardly relevant here:

ERROR TypeError: Cannot read property 'display' of undefined
    at cloakElement (\node_modules\@angular\animations\bundles\animations-browser.umd.js:4374:50)
    at \node_modules\@angular\animations\bundles\animations-browser.umd.js:4386:79
    at Array.map (native)
    at cloakAndComputeStyles (\node_modules\@angular\animations\bundles\animations-browser.umd.js:4386:47)
    at TransitionAnimationEngine._flushAnimations (\node_modules\@angular\animations\bundles\animations-browser.umd.js:3880:46)
    at TransitionAnimationEngine.flush (\node_modules\@angular\animations\bundles\animations-browser.umd.js:3703:32)
    at InjectableAnimationEngine.AnimationEngine.flush (\node_modules\@angular\animations\bundles\animations-browser.umd.js:4642:32)
    at \node_modules\@angular\platform-browser\bundles\platform-browser-animations.umd.js:333:30
    at ZoneDelegate.invoke (\node_modules\zone.js\dist\zone-node.js:391:26)
    at Zone.run (\node_modules\zone.js\dist\zone-node.js:141:43)
    at NgZone.runOutsideAngular (\node_modules\@angular\core\bundles\core.umd.js:3876:83)
    at AnimationRendererFactory.end (\node_modules\@angular\platform-browser\bundles\platform-browser-animations.umd.js:331:24)
    at ViewRef_.detectChanges (\node_modules\@angular\core\bundles\core.umd.js:10203:16)
    at \node_modules\@angular\core\bundles\core.umd.js:4839:63
    at Array.forEach (native)
    at ApplicationRef_.tick (\node_modules\@angular\core\bundles\core.umd.js:4839:25)

Expected behavior

Those functions should not be called on server side since style is not defined on Element there.

Minimal reproduction of the problem with instructions

I believe it can be reproduced by calling platformServer.renderModuleFactory(AppModule) if AppModule contains ServerModule, NoopAnimationsModule and some component with animations

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

Would be nice to avoid polluting logs with these errors

Environment

Angular version: 4.3.3


Browser: any
- [ ] Chrome (desktop) version XX
- [ ] 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.0.0  
- Platform:  Win 10 

Others:

[vikerman]

I will have time to look into this next week and get it into the next 4.x patch release

[AndriiZelenskyi]

@vikerman Do you have any updates or workaround for this issue?