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)
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?