2

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?

Tom
  • 3,672
  • 6
  • 20
  • 52
  • This page has the solution: https://stackoverflow.com/questions/60636286/angular-9-ssr-build-serve-eror-error-referenceerror-document-is-not-defined – Martijn Hiemstra Oct 06 '21 at 11:08

2 Answers2

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
    }
}
Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
  • As far as I know I did. What exactly is client side code though? `*ngFor` etc.? – Tom Oct 16 '19 at 19:20
  • No code includes document, window, sessionStorage etc. Please check my updated answer. – Pardeep Jain Oct 16 '19 at 19:23
  • Do I solely have to edit the first component or every component? – Tom Oct 16 '19 at 19:27
  • IMO in every component, because every component must be included somewhere in some module and indirectly in the app.module or routing. – Pardeep Jain Oct 16 '19 at 19:28
  • You mentioned navigator, what about routing? – Tom Oct 16 '19 at 19:30
  • not angular's routing, but yes navigatior as it is again doesn't exist on the server. – Pardeep Jain Oct 16 '19 at 19:32
  • I have to inject `PLATFORM_ID` within the constructor? Right? – Tom Oct 16 '19 at 19:39
  • Is there a way find the location of the errors? Because I think I've edited everything I have to. – Tom Oct 16 '19 at 19:50
  • not sure, but you can enable sourcemap while build it will help you out. – Pardeep Jain Oct 16 '19 at 19:51
  • What about host listeners and can libraries cause issues as well? Because I can't find further client side code and the error itself mentions "is not defined at..". – Tom Oct 16 '19 at 20:17
  • Got it, issue was caused by BrowserAnimationsModule, because as you mentioned, it includes client side code. Hence I removed the module - do you happen to know another bypass? – Tom Oct 16 '19 at 20:22
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

MammothDevelopper
  • 424
  • 5
  • 8