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)

[danieldanielecki]

With the latest answers, I've had navigator is not defined, which has an easy fix (global as any).navigator = win.navigator;.

Later, TypeError: Cannot read property 'charAt' of undefined popped up. It was doable to have it fixed by removing(global as any).XMLHttpRequest = require('xhr2');

Apparently, the xhr2 and ws packages weren't needed, and the code could've been dropped as well

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');

I've also simplified this part

const distFolder = join(process.cwd(), 'dist/nbinar/browser');
const indexHtml = 'index.html';
const template = readFileSync(join(distFolder, indexHtml)).toString();
const win = createWindow(template);

into

const indexHtml = join(
  process.cwd(),
  'dist/nbinar/browser/index2.html'
);
const win = createWindow(indexHtml);

It left me with the whole code as lean as possible

import { createWindow } from 'domino';
import { join } from 'path';
const indexHtml = join(
  process.cwd(),
  'dist/nbinar/browser/index2.html'
);
const win = createWindow(indexHtml);

// Polyfills
(global as any).window = win;
(global as any).document = win.document;
(global as any).navigator = win.navigator;

All in server.ts, other files were completely fine. Of course, I've excluded the 3 useless packages from package.json, i.e. fs, xhr2, and ws.

Many thanks for contribution to fixing such an irritating error.

PS. Works fine on Angular 10, locally rendered by Cloud Functions for Firebase as well as once deploying to Firebase.

[FavioT]

@danieldanielecki @michelepatrassi, after several hours and tests done, I almost gave up, but thanks to your answers I was able to compile my project in Angular Universal.

this is my config:

[ntegral]

I am glad to hear that!! :)

[jdgamble555]

nebular needs to fix this, domino is not a valid option as the package itself is HUGE and SLOW!

[GuruNadh552]

Window is not defined

Angular universal

[alan-agius4]

Please see https://github.com/angular/universal/blob/main/docs/gotchas.md#window-is-not-defined

[angular-automatic-lock-bot[bot]]

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