window is not defined

[theunreal]

• I'm submitting a ...

- [ x] bug report
- [ ] feature request
- [ ] support request => Please do not submit support request here, see note at the top of this template.

• What modules are related to this Issue?

- [ ] aspnetcore-engine
- [x ] express-engine
- [ ] hapi-engine

• Do you want to request a feature or report a bug?
  bug

• What is the current behavior?
  I followed this tutorial:
  https://github.com/angular/angular-cli/wiki/stories-universal-rendering
  used node dist/server.js and got this message as expected:

Node server listening on http://localhost:4000

but when I'm trying to access my localhost:4000 I get this in the console:

ERROR { ReferenceError: window is not defined
    at new e (c:\workspace\proj\dist\server.js:109969:479742)
    at createClass (c:\workspace\proj\dist\server.js:11205:26)
    at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
    at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
    at createRootView (c:\workspace\proj\dist\server.js:12366:5)
    at Object.createProdRootView [as createRootView] (c:\workspace\proj\dist\server.js:13051:12)
    at ComponentFactory_.create (c:\workspace\proj\dist\server.js:10138:46)
    at ComponentFactoryBoundToModule.create (c:\workspace\proj\dist\server.js:3607:29)
    at ApplicationRef_.bootstrap (c:\workspace\proj\dist\server.js:5042:57)
    at c:\workspace\proj\dist\server.js:4820:81
  __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] } }
ERROR { Error: Uncaught (in promise): ReferenceError: FB is not defined
ReferenceError: FB is not defined
    at FacebookService.init (c:\workspace\proj\dist\server.js:48421:36)
    at new e (c:\workspace\proj\dist\server.js:109969:16176)
    at _createClass (c:\workspace\proj\dist\server.js:9798:17)
    at _createProviderInstance$1 (c:\workspace\proj\dist\server.js:9766:26)
    at resolveNgModuleDep (c:\workspace\proj\dist\server.js:9751:17)
    at NgModuleRef_.get (c:\workspace\proj\dist\server.js:10843:16)
    at resolveDep (c:\workspace\proj\dist\server.js:11346:45)
    at createClass (c:\workspace\proj\dist\server.js:11205:35)
    at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
    at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
    at resolvePromise (c:\workspace\proj\dist\server.js:68637:31)
    at resolvePromise (c:\workspace\proj\dist\server.js:68608:17)
    at c:\workspace\proj\dist\server.js:68686:17
    at ZoneDelegate.invokeTask (c:\workspace\proj\dist\server.js:68267:31)
    at Object.onInvokeTask (c:\workspace\proj\dist\server.js:4155:33)
    at ZoneDelegate.invokeTask (c:\workspace\proj\dist\server.js:68266:36)
    at Zone.runTask (c:\workspace\proj\dist\server.js:68034:47)
    at drainMicroTaskQueue (c:\workspace\proj\dist\server.js:68444:35)
    at ZoneTask.invokeTask (c:\workspace\proj\dist\server.js:68345:21)
    at Server.ZoneTask.invoke (c:\workspace\proj\dist\server.js:68330:48)
  rejection: 
   { ReferenceError: FB is not defined
       at FacebookService.init (c:\workspace\proj\dist\server.js:48421:36)
       at new e (c:\workspace\proj\dist\server.js:109969:16176)
       at _createClass (c:\workspace\proj\dist\server.js:9798:17)
       at _createProviderInstance$1 (c:\workspace\proj\dist\server.js:9766:26)
       at resolveNgModuleDep (c:\workspace\proj\dist\server.js:9751:17)
       at NgModuleRef_.get (c:\workspace\proj\dist\server.js:10843:16)
       at resolveDep (c:\workspace\proj\dist\server.js:11346:45)
       at createClass (c:\workspace\proj\dist\server.js:11205:35)
       at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
       at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
     __zone_symbol__currentTask: 
      ZoneTask {
        _zone: [Object],
        runCount: 0,
        _zoneDelegates: null,
        _state: 'notScheduled',
        type: 'microTask',
        source: 'Promise.then',
        data: undefined,
        scheduleFn: undefined,
        cancelFn: null,
        callback: [Function],
        invoke: [Function] } },
  promise: 
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value: 
      { ReferenceError: FB is not defined
          at FacebookService.init (c:\workspace\proj\dist\server.js:48421:36)
          at new e (c:\workspace\proj\dist\server.js:109969:16176)
          at _createClass (c:\workspace\proj\dist\server.js:9798:17)
          at _createProviderInstance$1 (c:\workspace\proj\dist\server.js:9766:26)
          at resolveNgModuleDep (c:\workspace\proj\dist\server.js:9751:17)
          at NgModuleRef_.get (c:\workspace\proj\dist\server.js:10843:16)
          at resolveDep (c:\workspace\proj\dist\server.js:11346:45)
          at createClass (c:\workspace\proj\dist\server.js:11205:35)
          at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
          at createViewNodes (c:\workspace\proj\dist\server.js:12471:49) __zone_symbol__currentTask: [Object] } },
  zone: 
   Zone {
     _properties: { isAngularZone: true },
     _parent: 
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     _name: 'angular',
     _zoneDelegate: 
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: [Object],
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: [Object],
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: [Object],
        _invokeZS: [Object],
        _invokeDlgt: [Object],
        _invokeCurrZone: [Circular],
        _handleErrorZS: [Object],
        _handleErrorDlgt: [Object],
        _handleErrorCurrZone: [Circular],
        _scheduleTaskZS: [Object],
        _scheduleTaskDlgt: [Object],
        _scheduleTaskCurrZone: [Circular],
        _invokeTaskZS: [Object],
        _invokeTaskDlgt: [Object],
        _invokeTaskCurrZone: [Circular],
        _cancelTaskZS: [Object],
        _cancelTaskDlgt: [Object],
        _cancelTaskCurrZone: [Circular],
        _hasTaskZS: [Object],
        _hasTaskDlgt: [Object],
        _hasTaskDlgtOwner: [Circular],
        _hasTaskCurrZone: [Circular] } },
  task: 
   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: window is not defined ; Zone: <root> ; Task: Promise.then ; Value: { ReferenceError: window is not defined
    at new e (c:\workspace\proj\dist\server.js:109969:479742)
    at createClass (c:\workspace\proj\dist\server.js:11205:26)
    at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
    at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
    at createRootView (c:\workspace\proj\dist\server.js:12366:5)
    at Object.createProdRootView [as createRootView] (c:\workspace\proj\dist\server.js:13051:12)
    at ComponentFactory_.create (c:\workspace\proj\dist\server.js:10138:46)
    at ComponentFactoryBoundToModule.create (c:\workspace\proj\dist\server.js:3607:29)
    at ApplicationRef_.bootstrap (c:\workspace\proj\dist\server.js:5042:57)
    at c:\workspace\proj\dist\server.js:4820:81
  __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: window is not defined
    at new e (c:\workspace\proj\dist\server.js:109969:479742)
    at createClass (c:\workspace\proj\dist\server.js:11205:26)
    at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
    at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
    at createRootView (c:\workspace\proj\dist\server.js:12366:5)
    at Object.createProdRootView [as createRootView] (c:\workspace\proj\dist\server.js:13051:12)
    at ComponentFactory_.create (c:\workspace\proj\dist\server.js:10138:46)
    at ComponentFactoryBoundToModule.create (c:\workspace\proj\dist\server.js:3607:29)
    at ApplicationRef_.bootstrap (c:\workspace\proj\dist\server.js:5042:57)
    at c:\workspace\proj\dist\server.js:4820:81
ERROR { ReferenceError: window is not defined
    at new e (c:\workspace\proj\dist\server.js:109969:479742)
    at createClass (c:\workspace\proj\dist\server.js:11205:26)
    at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
    at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
    at createRootView (c:\workspace\proj\dist\server.js:12366:5)
    at Object.createProdRootView [as createRootView] (c:\workspace\proj\dist\server.js:13051:12)
    at ComponentFactory_.create (c:\workspace\proj\dist\server.js:10138:46)
    at ComponentFactoryBoundToModule.create (c:\workspace\proj\dist\server.js:3607:29)
    at ApplicationRef_.bootstrap (c:\workspace\proj\dist\server.js:5042:57)
    at c:\workspace\proj\dist\server.js:4820:81
  __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] } }
ERROR { Error: Uncaught (in promise): ReferenceError: FB is not defined
ReferenceError: FB is not defined
    at FacebookService.init (c:\workspace\proj\dist\server.js:48421:36)
    at new e (c:\workspace\proj\dist\server.js:109969:16176)
    at _createClass (c:\workspace\proj\dist\server.js:9798:17)
    at _createProviderInstance$1 (c:\workspace\proj\dist\server.js:9766:26)
    at resolveNgModuleDep (c:\workspace\proj\dist\server.js:9751:17)
    at NgModuleRef_.get (c:\workspace\proj\dist\server.js:10843:16)
    at resolveDep (c:\workspace\proj\dist\server.js:11346:45)
    at createClass (c:\workspace\proj\dist\server.js:11205:35)
    at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
    at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
    at resolvePromise (c:\workspace\proj\dist\server.js:68637:31)
    at resolvePromise (c:\workspace\proj\dist\server.js:68608:17)
    at c:\workspace\proj\dist\server.js:68686:17
    at ZoneDelegate.invokeTask (c:\workspace\proj\dist\server.js:68267:31)
    at Object.onInvokeTask (c:\workspace\proj\dist\server.js:4155:33)
    at ZoneDelegate.invokeTask (c:\workspace\proj\dist\server.js:68266:36)
    at Zone.runTask (c:\workspace\proj\dist\server.js:68034:47)
    at drainMicroTaskQueue (c:\workspace\proj\dist\server.js:68444:35)
    at ZoneTask.invokeTask (c:\workspace\proj\dist\server.js:68345:21)
    at Server.ZoneTask.invoke (c:\workspace\proj\dist\server.js:68330:48)
  rejection: 
   { ReferenceError: FB is not defined
       at FacebookService.init (c:\workspace\proj\dist\server.js:48421:36)
       at new e (c:\workspace\proj\dist\server.js:109969:16176)
       at _createClass (c:\workspace\proj\dist\server.js:9798:17)
       at _createProviderInstance$1 (c:\workspace\proj\dist\server.js:9766:26)
       at resolveNgModuleDep (c:\workspace\proj\dist\server.js:9751:17)
       at NgModuleRef_.get (c:\workspace\proj\dist\server.js:10843:16)
       at resolveDep (c:\workspace\proj\dist\server.js:11346:45)
       at createClass (c:\workspace\proj\dist\server.js:11205:35)
       at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
       at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
     __zone_symbol__currentTask: 
      ZoneTask {
        _zone: [Object],
        runCount: 0,
        _zoneDelegates: null,
        _state: 'notScheduled',
        type: 'microTask',
        source: 'Promise.then',
        data: undefined,
        scheduleFn: undefined,
        cancelFn: null,
        callback: [Function],
        invoke: [Function] } },
  promise: 
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value: 
      { ReferenceError: FB is not defined
          at FacebookService.init (c:\workspace\proj\dist\server.js:48421:36)
          at new e (c:\workspace\proj\dist\server.js:109969:16176)
          at _createClass (c:\workspace\proj\dist\server.js:9798:17)
          at _createProviderInstance$1 (c:\workspace\proj\dist\server.js:9766:26)
          at resolveNgModuleDep (c:\workspace\proj\dist\server.js:9751:17)
          at NgModuleRef_.get (c:\workspace\proj\dist\server.js:10843:16)
          at resolveDep (c:\workspace\proj\dist\server.js:11346:45)
          at createClass (c:\workspace\proj\dist\server.js:11205:35)
          at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
          at createViewNodes (c:\workspace\proj\dist\server.js:12471:49) __zone_symbol__currentTask: [Object] } },
  zone: 
   Zone {
     _properties: { isAngularZone: true },
     _parent: 
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     _name: 'angular',
     _zoneDelegate: 
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: [Object],
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: [Object],
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: [Object],
        _invokeZS: [Object],
        _invokeDlgt: [Object],
        _invokeCurrZone: [Circular],
        _handleErrorZS: [Object],
        _handleErrorDlgt: [Object],
        _handleErrorCurrZone: [Circular],
        _scheduleTaskZS: [Object],
        _scheduleTaskDlgt: [Object],
        _scheduleTaskCurrZone: [Circular],
        _invokeTaskZS: [Object],
        _invokeTaskDlgt: [Object],
        _invokeTaskCurrZone: [Circular],
        _cancelTaskZS: [Object],
        _cancelTaskDlgt: [Object],
        _cancelTaskCurrZone: [Circular],
        _hasTaskZS: [Object],
        _hasTaskDlgt: [Object],
        _hasTaskDlgtOwner: [Circular],
        _hasTaskCurrZone: [Circular] } },
  task: 
   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: window is not defined ; Zone: <root> ; Task: Promise.then ; Value: { ReferenceError: window is not defined
    at new e (c:\workspace\proj\dist\server.js:109969:479742)
    at createClass (c:\workspace\proj\dist\server.js:11205:26)
    at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
    at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
    at createRootView (c:\workspace\proj\dist\server.js:12366:5)
    at Object.createProdRootView [as createRootView] (c:\workspace\proj\dist\server.js:13051:12)
    at ComponentFactory_.create (c:\workspace\proj\dist\server.js:10138:46)
    at ComponentFactoryBoundToModule.create (c:\workspace\proj\dist\server.js:3607:29)
    at ApplicationRef_.bootstrap (c:\workspace\proj\dist\server.js:5042:57)
    at c:\workspace\proj\dist\server.js:4820:81
  __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: window is not defined
    at new e (c:\workspace\proj\dist\server.js:109969:479742)
    at createClass (c:\workspace\proj\dist\server.js:11205:26)
    at createDirectiveInstance (c:\workspace\proj\dist\server.js:11030:37)
    at createViewNodes (c:\workspace\proj\dist\server.js:12471:49)
    at createRootView (c:\workspace\proj\dist\server.js:12366:5)
    at Object.createProdRootView [as createRootView] (c:\workspace\proj\dist\server.js:13051:12)
    at ComponentFactory_.create (c:\workspace\proj\dist\server.js:10138:46)
    at ComponentFactoryBoundToModule.create (c:\workspace\proj\dist\server.js:3607:29)
    at ApplicationRef_.bootstrap (c:\workspace\proj\dist\server.js:5042:57)
    at c:\workspace\proj\dist\server.js:4820:81

• What is the expected behavior?
  Should access my angular project instead throwing an error

• What is the motivation / use case for changing the behavior?
  bug fix

• Please tell us about your environment:

• Angular version: 4.0.0
• Browser: all
• Language:all
• OS: Windows
• Platform:NodeJS

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[leo6104]

"window is not defined" came from 3rd party library which accessing window variable.

You should wrapping your code with browser check condition

In html,

<ng-container *ngIf="isBrowser">
   <!-- In my case, ngx-siema & ngx-slcik -->
   <ngx-siema></ngx-siema> 
</ng-container>

In ts,

isBrowser;
constructor(@Inject(PLATFORM_ID) private platformId) { 
   this.isBrowser = isPlatformBrowser(platformId);
}

...

if (this.isBrowser) { 
  // put your code which is access window variable 
} 

[kenji-1996]

Just want to jump in here and say that I had 'hammerjs' imported for Material2 and that was what was giving this issue, removing that (or adding checks for when its in browser) fixed this

[leo6104]

@kenji-1996 Good point. the best way to support material2 with ssr is import hammerjs in main.ts

Material guide already said hammerjs should be imported from main.ts (not polyfills.ts or app.module)
https://github.com/angular/material2/blob/master/guides/getting-started.md

After installing, import it on your app's entry point (e.g. src/main.ts).

[jfahrenkrug]

I'd like to join in with a question as well: The blog post about the Angular 5.0 release states that it comes with Mozilla's domino, quote:

Another change from the Angular Universal team is the addition of Domino to platform-server. Domino means that we support more DOM manipulations out of the box within server side contexts, improving our support for 3rd party JS and Component libraries that aren’t server-side aware.

Can domino somehow be used to provide a "fake" window when rendering on the server?

[Toxicable]

Domino is just for the DOM specifically, the window is separate from this.
We have a proposal with some discussion over here #828

[Gorniv]

You can fix window is not defined like this:
server.ts (start of file)

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;

look: https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts

[Ks89]

@Gorniv
I tried your solution but I got this error:

> node dist/server

/Users/ks89/git/angular-modal-gallery/examples/universal/dist/server.js:114735
            'mod': /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? 'meta' : 'ctrl'
                                               ^
ReferenceError: navigator is not defined

[Gorniv]

@Ks89 in https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts line 94:

app.get('*', (req, res) => {
  global['navigator'] = req['headers']['user-agent'];

[jasonaibrahim]

this may or may not help someone so ill post in case it does. i had some strange issues when using const domino = require('domino'). i was missing methods on some objects. to resolve this, i referenced the module that gets bundled within platform-server

const domino = require('@angular/platform-server/node_modules/domino');

const domino = require('@angular/platform-server/node_modules/domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(getTemplatesPath(), 'index.html')).toString();
const win = domino.createWindow(template);

global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['MutationObserver'] = getMockMutationObserver();

function getMockMutationObserver() {
  return class {
    observe(node, options) {
    }
    disconnect() {
    }
    takeRecords() {
      return [];
    }
  };
}

not entirely sure why the two references were different but there you go