Angular 6 | Server side rendering: issue 'window not defined'

Question

I have updated my application from angular version 5 to latest. Here's detail:

  Angular CLI: 6.2.1
  Node: 8.12.0
  OS: win32 x64
  Angular: 6.1.6

Also I am using this: ng-toolkit-universal to achieve server side rendering. I am able to build application using command "npm run build:prod" , but facing following issue while running command: "npm run server":

Can anyone please help or suggest some soution for the same.

Thanks in advance!

Have you used the window Object in your Angular App? If you have, It's advisable to use Renderer2 for doing DOM Manipulations instead of directly using the window or the document object. — SiddAjmera
– SiddAjmera, Commented Sep 18, 2018 at 17:32
Hi @SiddAjmera, Thanks for reply! Yes, I am using window object but not using Renderer2. Let me try that. — Monika D
– Monika D, Commented Sep 19, 2018 at 5:28
That explains why you're getting this error. Angular Universal doesn't have access to the window or the document object as it runs on Server. That's why Angular Team recommends use of Renderer2 — SiddAjmera
– SiddAjmera, Commented Sep 19, 2018 at 5:29
@SiddAjmera Actually, i am new to this and trying my hands on it. I hope Renderer2 will resolve my problem. Do u know any good example/link for the same in angular 6? — Monika D
– Monika D, Commented Sep 19, 2018 at 5:59

Prashant Waghe · Accepted Answer · 2018-12-10 13:55:07Z

7

Assuming you are done SSR with angular universal. Put following code in your server.ts after imports. Build and run.

const domino = require("domino");
const fs = require("fs");
const path = require("path");
const templateA = fs
  .readFileSync(path.join("dist/browser", "index.html"))
  .toString();
const win = domino.createWindow(templateA);
win.Object = Object;
win.Math = Math;

global["window"] = win;
global["document"] = win.document;
global["branch"] = null;
global["object"] = win.object;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['localStorage'] = localStorage;

answered Dec 10, 2018 at 13:55

Prashant Waghe

811 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rahul Over a year ago

Unfortunately this didn't work for me. I am using angular 14(same version of angular universal as well)

Collectives™ on Stack Overflow

Angular 6 | Server side rendering: issue 'window not defined'

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related