Angular Universal npm run serve:ssr returns "document is not defined"

Question

I've recently implemented Angular Universal for Angular 8. However running npm run serve:ssr returns the following:

ReferenceError: document is not defined
    at new CssKeyframesDriver (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/animations/bundles/animations-browser.umd.js:4379:26)
    at instantiateSupportedAnimationDriver (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:412:88)
    at _callFactory (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:21002:24)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20960:30)
    at resolveNgModuleDep (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20921:25)
    at _createClass (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20989:72)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20957:30)
    at resolveNgModuleDep (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20921:25)
    at _callFactory (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:21008:71)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20960:30)

Does anybody know what that means?

This page has the solution: stackoverflow.com/questions/60636286/… — Martijn Hiemstra
– Martijn Hiemstra, Commented Oct 6, 2021 at 11:08

Pardeep Jain · Accepted Answer · 2019-10-16 19:40:58Z

7

Client side code/keywords like Document, Window, localstorage etc will not present while running in the SSR/Universal mode of your angular application as your first page will be rendering on the server.

window, document, localstorage, navigator, and other browser types - do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work in the SSR mode.

So If in your code any such piece of code present then you need to wrap your client side code in platformBrowser like this -

import { ..., PLATFORM_ID, ... } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';


constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
){
    if (isPlatformBrowser(this.platformId)) {
       // Your client side code
    }
}

edited Oct 16, 2019 at 19:40

answered Oct 16, 2019 at 19:19

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

11 Comments

Tom Over a year ago

As far as I know I did. What exactly is client side code though? *ngFor etc.?

Pardeep Jain Over a year ago

No code includes document, window, sessionStorage etc. Please check my updated answer.

Tom Over a year ago

Do I solely have to edit the first component or every component?

Pardeep Jain Over a year ago

IMO in every component, because every component must be included somewhere in some module and indirectly in the app.module or routing.

Tom Over a year ago

You mentioned navigator, what about routing?

|

MammothDevelopper · Accepted Answer · 2020-01-29 15:47:49Z

0

this method is too hard to set up you need to browse all places where there is a navigator, window localstorage ... and make the modification.

It can be done upstream in server.ts, follow this link : https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/framework-and-features/ssr-rendering.html

answered Jan 29, 2020 at 15:47

MammothDevelopper

4535 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular Universal npm run serve:ssr returns "document is not defined"

2 Answers 2

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related