<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When i use animations in HTML, SSR crashes.</p>
<p dir="auto">I have my animation defined and used in html like this</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div [@flyIn]&gt;&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">[@flyIn]</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I have browser module which imports <code class="notranslate">import {BrowserAnimationsModule} from '@angular/platform-browser/animations';</code></p>
<p dir="auto">I received error on server<br>
Error: Found the synthetic property <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/flyin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/flyin">@flyin</a>. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.</p>
<p dir="auto">When i import in server module <code class="notranslate">import {NoopAnimationsModule} from '@angular/platform-browser/animations';</code><br>
i receive another error which cause crash of server.</p>
<p dir="auto">EXCEPTION: document is not defined<br>
ORIGINAL STACKTRACE:<br>
ReferenceError: document is not defined<br>
at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72)<br>
at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23)<br>
at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44)<br>
at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5)<br>
at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12)<br>
at ComponentFactory_.create (F:\git\ng-universal-demo\dist\server.js:9485:46)<br>
at ApplicationRef_.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57)<br>
at F:\git\ng-universal-demo\dist\server.js:4657:89<br>
at Array.forEach (native)<br>
at PlatformRef_.<em>moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42)<br>
at F:\git\ng-universal-demo\dist\server.js:4620:27<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26)<br>
at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37)<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32)<br>
at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43)<br>
Unhandled Promise rejection: document is not defined ; Zone:  ; Task: Promise.then ; Value: { ReferenceError: document is not defined<br>
at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72)<br>
at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23)<br>
at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44)<br>
at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5)<br>
at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12)<br>
at ComponentFactory</em>.create (F:\git\ng-universal-demo\dist\server.js:9485:46)<br>
at ApplicationRef_.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57)<br>
at F:\git\ng-universal-demo\dist\server.js:4657:89<br>
at Array.forEach (native)<br>
at PlatformRef_._moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42)<br>
at F:\git\ng-universal-demo\dist\server.js:4620:27<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26)<br>
at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37)<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32)<br>
at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43)<br>
__zone_symbol__currentTask:<br>
ZoneTask {<br>
zone:<br>
Zone {<br>
_properties: {},<br>
<em>parent: null,<br>
<em>name: '',<br>
<em>zoneDelegate: [Object] },<br>
runCount: 0,<br>
<em>zoneDelegates: null,<br>
<em>state: 'notScheduled',<br>
type: 'microTask',<br>
source: 'Promise.then',<br>
data: undefined,<br>
scheduleFn: undefined,<br>
cancelFn: null,<br>
callback: [Function],<br>
invoke: [Function] } } ReferenceError: document is not defined<br>
at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72)<br>
at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23)<br>
at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44)<br>
at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5)<br>
at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12)<br>
at ComponentFactory</em>.create (F:\git\ng-universal-demo\dist\server.js:9485:46)<br>
at ApplicationRef</em>.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57)<br>
at F:\git\ng-universal-demo\dist\server.js:4657:89<br>
at Array.forEach (native)<br>
at PlatformRef</em>.<em>moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42)<br>
at F:\git\ng-universal-demo\dist\server.js:4620:27<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26)<br>
at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37)<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32)<br>
at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43)<br>
{ Error: Uncaught (in promise): ReferenceError: document is not defined<br>
ReferenceError: document is not defined<br>
at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72)<br>
at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23)<br>
at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44)<br>
at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5)<br>
at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12)<br>
at ComponentFactory</em>.create (F:\git\ng-universal-demo\dist\server.js:9485:46)<br>
at ApplicationRef.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57)<br>
at F:\git\ng-universal-demo\dist\server.js:4657:89<br>
at Array.forEach (native)<br>
at PlatformRef.<em>moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42)<br>
at F:\git\ng-universal-demo\dist\server.js:4620:27<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26)<br>
at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37)<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32)<br>
at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43)<br>
at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59898:31) []<br>
at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59869:17) []<br>
at F:\git\ng-universal-demo\dist\server.js:59946:17 []<br>
at Zone.runTask (F:\git\ng-universal-demo\dist\server.js:59399:47) [ =&gt; ]<br>
at drainMicroTaskQueue (F:\git\ng-universal-demo\dist\server.js:59779:35) []<br>
at ZoneTask.invoke (F:\git\ng-universal-demo\dist\server.js:59657:25) []<br>
at data.args.(anonymous function) (F:\git\ng-universal-demo\dist\server.js:60752:25) []<br>
at FSReqWrap.oncomplete (fs.js:114:15) []<br>
<em><em>zone_symbol__error:<br>
{ Error: Uncaught (in promise): ReferenceError: document is not defined<br>
ReferenceError: document is not defined<br>
at DefaultDomRenderer2.selectRootElement (F:\git\ng-universal-demo\dist\server.js:31873:72)<br>
at createElement (F:\git\ng-universal-demo\dist\server.js:9067:23)<br>
at createViewNodes (F:\git\ng-universal-demo\dist\server.js:11533:44)<br>
at createRootView (F:\git\ng-universal-demo\dist\server.js:11480:5)<br>
at Object.createProdRootView [as createRootView] (F:\git\ng-universal-demo\dist\server.js:12049:12)<br>
at ComponentFactory</em>.create (F:\git\ng-universal-demo\dist\server.js:9485:46)<br>
at ApplicationRef</em>.bootstrap (F:\git\ng-universal-demo\dist\server.js:4862:57)<br>
at F:\git\ng-universal-demo\dist\server.js:4657:89<br>
at Array.forEach (native)<br>
at PlatformRef</em>._moduleDoBootstrap (F:\git\ng-universal-demo\dist\server.js:4657:42)<br>
at F:\git\ng-universal-demo\dist\server.js:4620:27<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59567:26)<br>
at Object.onInvoke (F:\git\ng-universal-demo\dist\server.js:4017:37)<br>
at ZoneDelegate.invoke (F:\git\ng-universal-demo\dist\server.js:59566:32)<br>
at Zone.run (F:\git\ng-universal-demo\dist\server.js:59359:43)<br>
at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59898:31) []<br>
at resolvePromise (F:\git\ng-universal-demo\dist\server.js:59869:17) []<br>
at F:\git\ng-universal-demo\dist\server.js:59946:17 []<br>
at Zone.runTask (F:\git\ng-universal-demo\dist\server.js:59399:47) [ =&gt; ]<br>
at drainMicroTaskQueue (F:\git\ng-universal-demo\dist\server.js:59779:35) []<br>
at ZoneTask.invoke (F:\git\ng-universal-demo\dist\server.js:59657:25) []<br>
at data.args.(anonymous function) (F:\git\ng-universal-demo\dist\server.js:60752:25) []<br>
at FSReqWrap.oncomplete (fs.js:114:15) []</em></em></p>
<p dir="auto"><strong>Expected behavior</strong><br>
When i use animations in HTML, it will have no influence on SSR.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> &gt;=4.0.0-rc.3</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> [all]</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2.2.1]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> = v7.7.1</p>
</li>
</ul>
<p dir="auto">This will let animations work as a no-op on the server side when the AnimationModule included in the client app module.</p>