Animations causing problems with SSR: document is not defined #15098

kukjevov · 2017-03-12T20:29:22Z

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: ; 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: '',
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) []
at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59869:17) []
at F:\git\ng-universal-demo\dist\server.js:59946:17 []
at Zone.runTask (F:\git\ng-universal-demo\dist\server.js:59399:47) [ => ]
at drainMicroTaskQueue (F:\git\ng-universal-demo\dist\server.js:59779:35) []
at ZoneTask.invoke (F:\git\ng-universal-demo\dist\server.js:59657:25) []
at data.args.(anonymous function) (F:\git\ng-universal-demo\dist\server.js:60752:25) []
at FSReqWrap.oncomplete (fs.js:114:15) []
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) []
at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59869:17) []
at F:\git\ng-universal-demo\dist\server.js:59946:17 []
at Zone.runTask (F:\git\ng-universal-demo\dist\server.js:59399:47) [ => ]
at drainMicroTaskQueue (F:\git\ng-universal-demo\dist\server.js:59779:35) []
at ZoneTask.invoke (F:\git\ng-universal-demo\dist\server.js:59657:25) []
at data.args.(anonymous function) (F:\git\ng-universal-demo\dist\server.js:60752:25) []
at FSReqWrap.oncomplete (fs.js:114:15) []

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

The text was updated successfully, but these errors were encountered:

kbarralon · 2017-03-13T01:27:23Z

Same error with the same config.

michaelwaihenya · 2017-03-13T02:52:30Z

+1

kukjevov · 2017-03-13T06:57:52Z

Here is repository where last commit simulates error:

https://github.com/kukjevov/ng-universal-demo

It looks like that this https://github.com/angular/angular/pull/14880/files PR started this bug, or it is somehow connected to this.

@chuckjaz, @tbosch can you look at this :)?

Thank you

nicky-lenaers · 2017-03-13T11:49:19Z

Same error happens when using in Universal context

feloy · 2017-03-13T13:37:49Z

I got the same error upgrading to v4-rc.3 when using material2-beta2 (and the Menu component which uses animations).
I had to import the BrowserAnimationsModule from the AppModule and it worked again. (or NoopAnimationsModule if you do not want animations).

kukjevov · 2017-03-13T13:51:29Z

@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 :).

feloy · 2017-03-13T14:00:35Z

@kukjevov Well, no, I got the same error (Error: Found the synthetic property ... Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.) but in the browser. My answer were not directly directed to you, but placed here if somebody had the same error in my context (using Material in the browser), because your description helped me resolve my problem.

It was not very clear, sorry ;)

kukjevov · 2017-03-13T14:04:08Z

No problem :), but that server side part is a bug :).

DzmitryShylovich · 2017-03-13T14:04:48Z

Probably duplicate of #14784

kukjevov · 2017-03-13T16:06:17Z

It is not duplicate :). Recomended solution in #14784 cause error mention above document is not defined.

MikeRyanDev · 2017-03-13T17:43:46Z

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;
}

yfain · 2017-03-14T22:08:58Z

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]

vikerman · 2017-03-14T22:11:55Z

@yfain - Unrelated to this bug.

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

yfain · 2017-03-14T22:28:34Z

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

…efault (angular#15131) This is so that server side rendering does not throw an exception when it encounters animations on the server side and does not need the user to explicitly setup NoopAnimationsModule in their app server module. Fixes angular#15098, angular#14784. PR Close angular#15131

RockNHawk · 2017-04-15T06:16:05Z

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) },

szykov · 2017-04-16T13:17:03Z

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;
    };

ysus · 2017-04-21T16:00:42Z

update for the last release but sitll i have the same errorr (Angular 4.0.3) Universal

ERROR { ReferenceError: document is not defined at DefaultDomRenderer2.selectRootElement (C:\src2\evertonrobertoauler\cli-universal-demo-master\node_modules\@angular\platform-browser\bundles\platform-browser.umd.js:2821:72)

repo:
https://github.com/evertonrobertoauler/cli-universal-demo

qdouble · 2017-04-28T00:16:22Z

I still see this error in 4.1.0... @MikeRyanDev where do you apply that patch?

ysus · 2017-04-28T00:24:45Z

@MikeRyanDev
https://github.com/pquarme/cli-universal-demo

NelsonLamprecht · 2017-05-03T21:10:29Z

I still see this issue with angular universal running 4.0.0. Does 4.1 fix this?

BillyQin · 2017-06-15T09:07:16Z

I have Same error in 4.1.0,how to resolve this problem? thanks @kukjevov
I don't know how to use ɵServerRendererFactory2 , ɵServerRendererFactory2 can replace document in node?thanks @MikeRyanDev

sudippal · 2017-06-15T20:56:26Z

@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
  ]
})

jdlaping · 2017-06-20T06:37:58Z

thank you! this fixed my issue.

…efault (angular#15131) This is so that server side rendering does not throw an exception when it encounters animations on the server side and does not need the user to explicitly setup NoopAnimationsModule in their app server module. Fixes angular#15098, angular#14784. PR Close angular#15131

kakins · 2017-09-12T18:08:23Z

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

shamoh19 · 2017-10-24T11:34:20Z

@sudippal Hi can you please elaborate your solution? I am facing the same issue while server side rendering to serve a fully generated HTML page in server.ts

> ang_bs@0.0.0 start /Applications/Workspace/Angular/Ang_Bs
   > ts-node src/server.ts

   listening on http://localhost:4001!
   ERROR { ReferenceError: document is not defined
       at DefaultDomRenderer2.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:2818:72)
       at BaseAnimationRenderer.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/packages/platform-browser/animations/src/animation_renderer.ts:166:62)
       at createElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9220:23)
       at createViewNodes (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/view/view.ts:320:1)
       at createRootView (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12114:5)
       at Object.createProdRootView [as createRootView] (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12788:12)
       at ComponentFactory_.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9893:46)
       at ComponentFactoryBoundToModule.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:3365:29)
       at ApplicationRef_.bootstrap (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:670:1)
       at /Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:415:1
   __zone_symbol__currentTask:
   ZoneTask {
       _zone:
       Zone {
           _properties: [Object],
           _parent: [Object],
           _name: 'angular',
           _zoneDelegate: [Object] },
       runCount: 0,
       _zoneDelegates: null,
       _state: 'notScheduled',
       type: 'microTask',
       source: 'Promise.then',
       data: undefined,
       scheduleFn: undefined,
       cancelFn: null,
       callback: [Function],
       invoke: [Function] } }
   Unhandled Promise rejection: document is not defined ; Zone: <root> ; Task: Promise.then ; Value: { ReferenceError: document is not defined
       at DefaultDomRenderer2.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:2818:72)
       at BaseAnimationRenderer.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/packages/platform-browser/animations/src/animation_renderer.ts:166:62)
       at createElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9220:23)
       at createViewNodes (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/view/view.ts:320:1)
       at createRootView (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12114:5)
       at Object.createProdRootView [as createRootView] (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12788:12)
       at ComponentFactory_.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9893:46)
       at ComponentFactoryBoundToModule.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:3365:29)
       at ApplicationRef_.bootstrap (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:670:1)
       at /Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:415:1
   __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 (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:2818:72)
       at BaseAnimationRenderer.selectRootElement (/Applications/Workspace/Angular/Ang_Bs/packages/platform-browser/animations/src/animation_renderer.ts:166:62)
       at createElement (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9220:23)
       at createViewNodes (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/view/view.ts:320:1)
       at createRootView (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12114:5)
       at Object.createProdRootView [as createRootView] (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:12788:12)
       at ComponentFactory_.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:9893:46)
       at ComponentFactoryBoundToModule.create (/Applications/Workspace/Angular/Ang_Bs/node_modules/@angular/core/bundles/core.umd.js:3365:29)
       at ApplicationRef_.bootstrap (/Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:670:1)
       at /Applications/Workspace/Angular/Ang_Bs/packages/core/src/application_ref.ts:415:1

UTGuy · 2017-11-05T16:53:34Z

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

atariman5000 · 2017-12-12T20:17:03Z

I too had this error. However, I was able to resolve the error by importing import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; into the "app.module.browser.ts" file.

`import { NgModule } from '@angular/core';
import { BrowserModule, DOCUMENT } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// App
import { AppModuleShared } from './app.module.shared';
import { AppComponent } from './pages/shared/app/app.component';

@NgModule({
bootstrap: [ AppComponent ],
imports: [
BrowserAnimationsModule,
BrowserModule,
AppModuleShared
],
providers: [
{ provide: 'BASE_URL', useFactory: getBaseUrl }
]
})
export class AppModule {
}

export function getBaseUrl() {
return document.getElementsByTagName('base')[0].href;
}
`

viraya · 2018-04-19T07:34:14Z

In my case i did add the import of BrowserAnimationsModule to the top of app.module.ts but i forgot to add it to the imports array. after adding it my issue was fixed.

tiberiumihai · 2018-08-07T05:41:48Z

In my case I was importing NoopAnimationsModule before BrowserAnimationsModule like this:

NoopAnimationsModule,
BrowserAnimationsModule,

Just switch the order so that BrowserAnimationsModule is first:

BrowserAnimationsModule,
NoopAnimationsModule,

angular-automatic-lock-bot · 2019-09-13T22:23:37Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

kukjevov closed this as completed Mar 13, 2017

kukjevov reopened this Mar 13, 2017

kukjevov mentioned this issue Mar 13, 2017

Always include the NoopAnimationsModule in ServerModule #14784

Closed

chuckjaz added regression Indicates than the issue relates to something that worked in a previous version type: bug/fix area: animations labels Mar 13, 2017

vikerman self-assigned this Mar 13, 2017

vikerman added the area: server Issues related to server-side rendering label Mar 13, 2017

vikerman mentioned this issue Mar 14, 2017

fix(platform-server): setup NoopAnimationsModule in ServerModule by d… #15131

Closed

3 tasks

vikerman added severity3: broken and removed regression Indicates than the issue relates to something that worked in a previous version labels Mar 14, 2017

vikerman added this to the 4.0.0-blockers milestone Mar 14, 2017

mhevery closed this as completed in 5c5c2ae Mar 17, 2017

EdwardHinkle mentioned this issue Jun 22, 2017

Support Angular Universal (with CI job to test all components) angular/components#308

Closed

isaacrlevin mentioned this issue Jul 21, 2017

BrowserAnimationsModule Support with SSR TrilonIO/aspnetcore-angular-universal#338

Closed

stephtr mentioned this issue Jul 31, 2017

asp-prerender-module causes unhandled exception when BrowserAnimationsModule is included aspnet/JavaScriptServices#1160

Closed

CaerusKaru mentioned this issue Sep 17, 2017

Md-Sidenav open mode bootstrap animation angular/components#6865

Closed

ericmartinezr mentioned this issue Oct 11, 2017

ASP.NET CORE 2 + ANGULAR 4: NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined #19667

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Animations causing problems with SSR: document is not defined #15098

Animations causing problems with SSR: document is not defined #15098

kukjevov commented Mar 12, 2017 •

edited

Loading

kbarralon commented Mar 13, 2017

michaelwaihenya commented Mar 13, 2017

kukjevov commented Mar 13, 2017 •

edited

Loading

nicky-lenaers commented Mar 13, 2017

feloy commented Mar 13, 2017

kukjevov commented Mar 13, 2017 •

edited

Loading

feloy commented Mar 13, 2017

kukjevov commented Mar 13, 2017

DzmitryShylovich commented Mar 13, 2017

kukjevov commented Mar 13, 2017

MikeRyanDev commented Mar 13, 2017

yfain commented Mar 14, 2017 •

edited

Loading

vikerman commented Mar 14, 2017

yfain commented Mar 14, 2017

RockNHawk commented Apr 15, 2017 •

edited

Loading

szykov commented Apr 16, 2017

ysus commented Apr 21, 2017 •

edited

Loading

qdouble commented Apr 28, 2017

ysus commented Apr 28, 2017

NelsonLamprecht commented May 3, 2017

BillyQin commented Jun 15, 2017

sudippal commented Jun 15, 2017

jdlaping commented Jun 20, 2017

kakins commented Sep 12, 2017 •

edited

Loading

shamoh19 commented Oct 24, 2017 •

edited

Loading

UTGuy commented Nov 5, 2017

atariman5000 commented Dec 12, 2017

viraya commented Apr 19, 2018

tiberiumihai commented Aug 7, 2018

angular-automatic-lock-bot bot commented Sep 13, 2019

Animations causing problems with SSR: document is not defined #15098

Animations causing problems with SSR: document is not defined #15098

Comments

kukjevov commented Mar 12, 2017 • edited Loading

kbarralon commented Mar 13, 2017

michaelwaihenya commented Mar 13, 2017

kukjevov commented Mar 13, 2017 • edited Loading

nicky-lenaers commented Mar 13, 2017

feloy commented Mar 13, 2017

kukjevov commented Mar 13, 2017 • edited Loading

feloy commented Mar 13, 2017

kukjevov commented Mar 13, 2017

DzmitryShylovich commented Mar 13, 2017

kukjevov commented Mar 13, 2017

MikeRyanDev commented Mar 13, 2017

yfain commented Mar 14, 2017 • edited Loading

vikerman commented Mar 14, 2017

yfain commented Mar 14, 2017

RockNHawk commented Apr 15, 2017 • edited Loading

szykov commented Apr 16, 2017

ysus commented Apr 21, 2017 • edited Loading

qdouble commented Apr 28, 2017

ysus commented Apr 28, 2017

NelsonLamprecht commented May 3, 2017

BillyQin commented Jun 15, 2017

sudippal commented Jun 15, 2017

jdlaping commented Jun 20, 2017

kakins commented Sep 12, 2017 • edited Loading

shamoh19 commented Oct 24, 2017 • edited Loading

UTGuy commented Nov 5, 2017

atariman5000 commented Dec 12, 2017

viraya commented Apr 19, 2018

tiberiumihai commented Aug 7, 2018

angular-automatic-lock-bot bot commented Sep 13, 2019

kukjevov commented Mar 12, 2017 •

edited

Loading

kukjevov commented Mar 13, 2017 •

edited

Loading

kukjevov commented Mar 13, 2017 •

edited

Loading

yfain commented Mar 14, 2017 •

edited

Loading

RockNHawk commented Apr 15, 2017 •

edited

Loading

ysus commented Apr 21, 2017 •

edited

Loading

kakins commented Sep 12, 2017 •

edited

Loading

shamoh19 commented Oct 24, 2017 •

edited

Loading