0

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":

enter image description here

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

Thanks in advance!

Monika D
  • 103
  • 1
  • 3
  • 10
  • 1
    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 Sep 18 '18 at 17:32
  • Have you looked at the answer in [this post](https://stackoverflow.com/questions/48557931/server-side-rendering-angular-4-5-issue) OR [this post](https://stackoverflow.com/questions/48439557/angular-4-universal-window-is-not-defined)? – Narm Sep 18 '18 at 18:18
  • Hi @SiddAjmera, Thanks for reply! Yes, I am using window object but not using Renderer2. Let me try that. – Monika D Sep 19 '18 at 05: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 Sep 19 '18 at 05: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 Sep 19 '18 at 05:59
  • Try this: https://scotch.io/tutorials/server-side-rendering-in-angular-2-with-angular-universal – SiddAjmera Sep 19 '18 at 06:11
  • Hi @Narm, thanks for reply. Checked these links and got to know about 'domino'. Do u know more about this in angular 6? – Monika D Sep 19 '18 at 06:12
  • Hi @SiddAjmera, I have implemented `Renderer2` , but now facing this issue `{ Error: StaticInjectorError(AppServerModule)[NgClass -> ElementRef]: StaticInjectorError(Platform: core)[NgClass -> ElementRef]: NullInjectorError: No provider for ElementRef! at NullInjector.module.exports.NullInjector.get (` Could you please help? – Monika D Sep 27 '18 at 14:46
  • We'd need to see your implementation to understand what's wrong. – SiddAjmera Sep 27 '18 at 14:56
  • @SiddAjmera oh, but it's a huge application and can't share. One more thing, now when i run`ng serve` its giving an error in browser console: `Error: StaticInjectorError(AppModule)[AppModule -> InjectionToken ng-toolkit-local-storage]` any idea about this? – Monika D Sep 28 '18 at 05:24
  • Check if the suggestions in [**here**](https://github.com/angular/angular/issues/20101) work for you – SiddAjmera Sep 28 '18 at 05:50

1 Answers1

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;
Prashant Waghe
  • 81
  • 1
  • 6
  • Unfortunately this didn't work for me. I am using angular 14(same version of angular universal as well) – Rahul Feb 10 '23 at 09:27