ReferenceError: document is not defined

• 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? When you try and enter your server bundle on localhost:4000 in the browser you get an error saying ReferenceError: document is not defined for one of my services which handles cookies.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

Follow the story here, run the bundle and go to localhost:4000.

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

• What is the expected behavior? I expect the bundle to run and/or fail silently for this kind of error, or if there’s some kind of polyfill I can use.

• What is the motivation / use case for changing the behavior? If I have a service which uses document how can I avoid this error for being thrown? It’s not like I can just exclude it from the server bundle because basically every module uses this service.

• Please tell us about your environment:

• Angular version: 4.4.6
• Browser: [all]
• Language: [all]
• OS: [all]
• Platform: [NodeJs]

[skreborn]

Please read the Universal “Gotchas” section of the README. It explains both why document isn’t available and how to check for the current platform to write conditional code.

window, document, 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.

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

constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
     // Client only code.
     ...
  }
  if (isPlatformServer(this.platformId)) {
    // Server only code.
    ...
  }
}

[chriseugenerodriguez]

// SSR
import { isPlatformBrowser } from '@angular/common';
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
   // BROWSER
   if (isPlatformBrowser(this.platformId)) {

   }
}