Solvedangular 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: ; 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

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

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

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

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]

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