angular: 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:

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 20
  • Comments: 17 (4 by maintainers)

Most upvoted comments

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

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

Ugly but Working Hack: Edited animations-browser.umd.js in server node_modules/@angular/animations/bundles

function cloakElement(element, value) { if (!element.style) { // ADDED element.style = { display: ‘block’ }; } var /** @type {?} */ oldValue = element.style.display; element.style.display = value != null ? value : ‘none’; return oldValue; }

This got rid of the undefined display error, but now I’m getting below error on Firebase Cloud functions. Everything runs fine stand-alone in Node or with “firebase serve --only functions”.

TypeError: ctor is not a constructor at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:9544:26) at createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:9519:26) at initNgModule (/user_code/node_modules/@angular/core/bundles/core.umd.js:9473:13) at new NgModuleRef (/user_code/node_modules/@angular/core/bundles/core.umd.js:10587:9) at createNgModuleRef (/user_code/node_modules/@angular/core/bundles/core.umd.js:10571:12) at Object.debugCreateNgModuleRef [as createNgModuleRef] (/user_code/node_modules/@angular/core/bundles/core.umd.js:12865:12) at NgModuleFactory.create (/user_code/node_modules/@angular/core/bundles/core.umd.js:13860:25) at /user_code/node_modules/@angular/core/bundles/core.umd.js:4529:61 at ZoneDelegate.invoke (/user_code/node_modules/zone.js/dist/zone-node.js:391:26) at Object.onInvoke (/user_code/node_modules/@angular/core/bundles/core.umd.js:3922:33)

Same problem here. I am using Angular Material, but the error doesn’t appear to be related. I’m getting the error when conditionally hiding a div with *ngIf like this: <div class="pp-no-comments" *ngIf="comments.length == 0"> No comments yet! </div>

@funkizer thanks for your solution… it works for me 😃

btw any ide to do it inside our project-file?