angular: Animations causing problems with SSR: document is not defined

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature 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 i use animations in HTML, SSR crashes.

I have my animation defined and used in html like this

<div [@flyIn]></div>

I have browser module which imports import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

I received error on server Error: Found the synthetic property @flyIn. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application.

When i import in server module import {NoopAnimationsModule} from '@angular/platform-browser/animations'; i receive another error which cause crash of server.

EXCEPTION: document is not defined ORIGINAL STACKTRACE: ReferenceError: document is not defined at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72) at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23) at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44) at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5) at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12) at ComponentFactory_.create (F:\git\ng-universal-demo\dist\server.js:9485:46) at ApplicationRef_.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57) at F:\git\ng-universal-demo\dist\server.js:4657:89 at Array.forEach (native) at PlatformRef_.moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42) at F:\git\ng-universal-demo\dist\server.js:4620:27 at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26) at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37) at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32) at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43) Unhandled Promise rejection: document is not defined ; Zone: <root> ; Task: Promise.then ; Value: { ReferenceError: document is not defined at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72) at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23) at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44) at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5) at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12) at ComponentFactory.create (F:\git\ng-universal-demo\dist\server.js:9485:46) at ApplicationRef_.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57) at F:\git\ng-universal-demo\dist\server.js:4657:89 at Array.forEach (native) at PlatformRef_._moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42) at F:\git\ng-universal-demo\dist\server.js:4620:27 at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26) at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37) at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32) at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43) __zone_symbol__currentTask: ZoneTask { zone: Zone { _properties: {}, parent: null, name: ‘<root>’, zoneDelegate: [Object] }, runCount: 0, zoneDelegates: null, state: ‘notScheduled’, type: ‘microTask’, source: ‘Promise.then’, data: undefined, scheduleFn: undefined, cancelFn: null, callback: [Function], invoke: [Function] } } ReferenceError: document is not defined at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72) at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23) at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44) at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5) at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12) at ComponentFactory.create (F:\git\ng-universal-demo\dist\server.js:9485:46) at ApplicationRef.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57) at F:\git\ng-universal-demo\dist\server.js:4657:89 at Array.forEach (native) at PlatformRef.moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42) at F:\git\ng-universal-demo\dist\server.js:4620:27 at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26) at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37) at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32) at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43) { Error: Uncaught (in promise): ReferenceError: document is not defined ReferenceError: document is not defined at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72) at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23) at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44) at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5) at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12) at ComponentFactory.create (F:\git\ng-universal-demo\dist\server.js:9485:46) at ApplicationRef.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57) at F:\git\ng-universal-demo\dist\server.js:4657:89 at Array.forEach (native) at PlatformRef.moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42) at F:\git\ng-universal-demo\dist\server.js:4620:27 at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26) at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37) at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32) at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43) at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59898:31) [<root>] at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59869:17) [<root>] at F:\git\ng-universal-demo\dist\server.js:59946:17 [<root>] at Zone.runTask (F:\git\ng-universal-demo\dist\server.js:59399:47) [<root> => <root>] at drainMicroTaskQueue (F:\git\ng-universal-demo\dist\server.js:59779:35) [<root>] at ZoneTask.invoke (F:\git\ng-universal-demo\dist\server.js:59657:25) [<root>] at data.args.(anonymous function) (F:\git\ng-universal-demo\dist\server.js:60752:25) [<root>] at FSReqWrap.oncomplete (fs.js:114:15) [<root>] zone_symbol__error: { Error: Uncaught (in promise): ReferenceError: document is not defined ReferenceError: document is not defined at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72) at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23) at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44) at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5) at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12) at ComponentFactory.create (F:\git\ng-universal-demo\dist\server.js:9485:46) at ApplicationRef.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57) at F:\git\ng-universal-demo\dist\server.js:4657:89 at Array.forEach (native) at PlatformRef._moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42) at F:\git\ng-universal-demo\dist\server.js:4620:27 at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26) at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37) at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32) at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43) at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59898:31) [<root>] at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59869:17) [<root>] at F:\git\ng-universal-demo\dist\server.js:59946:17 [<root>] at Zone.runTask (F:\git\ng-universal-demo\dist\server.js:59399:47) [<root> => <root>] at drainMicroTaskQueue (F:\git\ng-universal-demo\dist\server.js:59779:35) [<root>] at ZoneTask.invoke (F:\git\ng-universal-demo\dist\server.js:59657:25) [<root>] at data.args.(anonymous function) (F:\git\ng-universal-demo\dist\server.js:60752:25) [<root>] at FSReqWrap.oncomplete (fs.js:114:15) [<root>]

Expected behavior When i use animations in HTML, it will have no influence on SSR.

Minimal reproduction of the problem with instructions

Angular version: >=4.0.0-rc.3

Browser: [all]

Language: [TypeScript 2.2.1]
Node (for AoT issues): node --version = v7.7.1

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 19
Comments: 30 (9 by maintainers)

Commits related to this issue

fix(platform-server): setup NoopAnimationsModule in ServerModule by default (#15131) This is so that server side rendering does not throw an exception when it encounters animations on the server side... — committed to angular/angular by vikerman 7 years ago
fix(platform-server): setup NoopAnimationsModule in ServerModule by default (#15131) This is so that server side rendering does not throw an exception when it encounters animations on the server side... — committed to SamVerschueren/angular by vikerman 7 years ago
fix(platform-server): setup NoopAnimationsModule in ServerModule by default (#15131) This is so that server side rendering does not throw an exception when it encounters animations on the server side... — committed to asnowwolf/angular by vikerman 7 years ago
fix(platform-server): setup NoopAnimationsModule in ServerModule by default (#15131) This is so that server side rendering does not throw an exception when it encounters animations on the server side... — committed to juleskremer/angular by vikerman 7 years ago

Most upvoted comments

+23

michaelwaihenya on Mar 13, 2017

@BillyQin I just figured it out after the long day search, hope this helps

// imports
import { NgModule, NgModuleFactory, NgModuleFactoryLoader, RendererFactory2, NgZone } from '@angular/core';
import { ServerModule, ɵServerRendererFactory2 } from '@angular/platform-server';
import { ɵAnimationEngine } from '@angular/animations/browser';
import { NoopAnimationsModule, ɵAnimationRendererFactory } from '@angular/platform-browser/animations';

// declarations
export function instantiateServerRendererFactory(
  renderer: RendererFactory2, engine: ɵAnimationEngine, zone: NgZone) {
   return new ɵAnimationRendererFactory(renderer, engine, zone);
}

const createRenderer = ɵServerRendererFactory2.prototype.createRenderer;
ɵServerRendererFactory2.prototype.createRenderer = function () {
  const result = createRenderer.apply(this, arguments);
  const setProperty = result.setProperty;
  result.setProperty = function () {
    try {
      setProperty.apply(this, arguments);
    } catch (e) {
      if (e.message.indexOf('Found the synthetic') === -1) {
        throw e;
      }
    }
  };
  return result;
}

export const SERVER_RENDER_PROVIDERS = [
  {
    provide: RendererFactory2,
    useFactory: instantiateServerRendererFactory,
    deps: [ɵServerRendererFactory2, ɵAnimationEngine, NgZone]
  }
];

// Module ref.
@NgModule({
  imports: [
    ServerModule,
    NoopAnimationsModule
  ],
  bootstrap: [.....],
  providers: [
    { provide: ........, useClass: ...... },
    SERVER_RENDER_PROVIDERS
  ]
})

+13

sudippal on Jun 15, 2017

I’m not using SSR, but Angular Material Beta.2 gives me the following error with 4.00-rc.2 when I run ng serve (this app works fine in Angular 2):

Error: Found the synthetic property @transformPlaceholder. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application. at checkNoSyntheticProp (http://localhost:4200/vendor.bundle.js:21462:15) [angular] at DefaultDomRenderer2.setProperty (http://localhost:4200/vendor.bundle.js:21430:9) [angular] at DebugRenderer2.setProperty (http://localhost:4200/vendor.bundle.js:12813:23) [angular] at setElementProperty (http://localhost:4200/vendor.bundle.js:9272:19) [angular] at checkAndUpdateElementValue (http://localhost:4200/vendor.bundle.js:9188:13) [angular] at checkAndUpdateElementInline (http://localhost:4200/vendor.bundle.js:9128:24) [angular] at checkAndUpdateNodeInline (http://localhost:4200/vendor.bundle.js:11679:23) [angular] at checkAndUpdateNode (http://localhost:4200/vendor.bundle.js:11654:16) [angular] at debugCheckAndUpdateNode (http://localhost:4200/vendor.bundle.js:12276:59) [angular] at debugCheckRenderNodeFn (http://localhost:4200/vendor.bundle.js:12255:13) [angular] at Object.eval [as updateRenderer] (/MdSelectModule/MdSelect/component.ngfactory.js:455:5) [angular] at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:4200/vendor.bundle.js:12240:21) [angular] at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:11626:14) [angular] at callViewAction (http://localhost:4200/vendor.bundle.js:11938:17) [angular]

yfain on Mar 14, 2017

Same thing for me:

Exception: Call to Node module failed with error: ReferenceError: document is not defined at DefaultDomRenderer2.selectRootElement (C:\Users\Administrator\Desktop\ng2-cv-blog\src\SPA\rendered\dist\app-server.js:18047:72) at createElement (C:\Users\Administrator\Desktop\ng2-cv-blog\src\SPA\rendered\dist\app-server.js:9587:23)

     /**
     * @param {?} selectorOrNode
     * @return {?}
     */
    DefaultDomRenderer2.prototype.selectRootElement = function (selectorOrNode) {
        var /** @type {?} */ el = typeof selectorOrNode === 'string' ? document.querySelector(selectorOrNode) :
            selectorOrNode;
        if (!el) {
            throw new Error("The selector \"" + selectorOrNode + "\" did not match any elements");
        }
        el.textContent = '';
        return el;
    };

szykov on Apr 16, 2017

I sitll have the same Error in Angualr 4.0.2 Universal

ZoneAwarePromise { __zone_symbol__state: 0, __zone_symbol__value: ReferenceError: document is not defined at ViewportRuler._cacheViewportGeometry (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:43537:30) at new ViewportRuler (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:43483:14) at Object.VIEWPORT_RULER_PROVIDER_FACTORY (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:43556:27) at AppServerModuleInjector.get [as _ɵh_81] (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:171879:94) at AppServerModuleInjector.getInternal (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:172711:24) at AppServerModuleInjector.NgModuleInjector.get (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:3980:44) at resolveDep (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:11354:45) at createClass (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:11223:32) at createDirectiveInstance (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:11051:37) at createViewNodes (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:12401:49) at callViewAction (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:12771:13) at execComponentViewsAction (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:12710:13) at createViewNodes (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:12428:5) at createRootView (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:12306:5) at Object.createProdRootView [as createRootView] (/Users/laurel/git/Nanhua.IOT/IOT-master/src/client2/dist/server.js:12884:12) },

RockNHawk on Apr 15, 2017

@yfain - Unrelated to this bug.

You should include BrwoserAnimationModule in your app module as the error indicates.

vikerman on Mar 14, 2017

Ran into the same problem. If you need a fix you can patch the server renderer to ignore the error:

import { ɵServerRendererFactory2 } from '@angular/platform-server';


const createRenderer = ɵServerRendererFactory2.prototype.createRenderer;

ɵServerRendererFactory2.prototype.createRenderer = function () {
  const result = createRenderer.apply(this, arguments);

  const setProperty = result.setProperty;

  result.setProperty = function () {
    try {
      setProperty.apply(this, arguments);
    } catch (e) {
      if (e.message.indexOf('Found the synthetic') === -1) {
        throw e;
      }
    }
  };

  return result;
}

MikeRyanDev on Mar 13, 2017

I am still experiencing this issue, and not really sure what the ultimate resolution was for this thread. Angular 4.2.5.

kakins on Sep 12, 2017

Yes, I actually fixed this issue by adding import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’; to the app.module.

yfain on Mar 14, 2017

@feloy Are you using Server Side Rendering (SSR) aka Universal ? Because this error happens in NodeJs environment, not in browser, but during rendering on server side.

I have BrowserAnimationsModule on browser side and it is working, this is not a problem 😃.

kukjevov on Mar 13, 2017

To solve the SSR issue I just created 3 modules - a Common module, a Browser module, and a Server module…

app-material.module.ts (common one)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCalendar } from '@angular/material';

@NgModule({
    imports: [
        CommonModule,
        //Add imorted material items here - ex. MatCalendar
    ],
    exports: [
        //Add imorted material items here - ex. MatCalendar
    ]
})
export class AppMaterialModule { }

app-material.module.server.ts (import the common one here)

import { NgModule } from '@angular/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppMaterialModule } from "./app-material.module";

@NgModule({
    imports: [
        AppMaterialModule,
        NoopAnimationsModule
    ],
    exports: [
        AppMaterialModule,
        NoopAnimationsModule
    ]
})
export class AppMaterialServerModule { }

app-material.module.browser.ts (import the common one here)

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppMaterialModule } from "./app-material.module";

@NgModule({
    imports: [
        AppMaterialModule,
        BrowserAnimationsModule
    ],
    exports: [
        AppMaterialModule,
        BrowserAnimationsModule
    ]
})
export class AppMaterialBrowserModule { }

Now just import the one you need into your main module

UTGuy on Nov 5, 2017

thank you! this fixed my issue.

jdlaping on Jun 20, 2017