Angular 7 Universal（服务器端渲染）[ERROR ReferenceError：document not defined]

Question

I have implemented SSR for my project and deployed it to heroku. Now, when I start app in heroku logs --tail I get a lot of things running and it lowers performance significantly. Most of the things are errors:

ERROR ReferenceError: document is not defined

Even though I am using constructions like this:

    if (isPlatformBrowser(this.platformId)) {
      const overflow = this.isMenuOpened ? 'hidden' : 'auto;';
      this.renderer.setStyle(this.document.body, 'overflow', overflow);
    }

Each time I reload page, this thing starts running again.

In my package.json file I have these commands to run:

"scripts": {
    "ng": "ng",
    "start": "node dist/server.js",
    "build": "npm run build:server:prod && npm run build:browser:prod",
    "build:server:prod": "ng run oilEnergy:server && webpack --config webpack.server.config.js --progress --colors",
    "build:browser:prod": "ng build --prod"
  }

So when Heroku is being deployed, it builds server and browser folders and compiles server.js file, which is then responsible for running my app.

After some time my app crashes and heroku shows Application error instead of my app.

I have no idea, why is this happening. Maybe somebody had this issue before?

Answer 1

try with document instead of this.document

following code is working for me

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


constructor(
    @Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(this.platformId)) {
      this.bodyTag = document.getElementsByTagName('body')[0];
      this.htmlTag = document.getElementsByTagName('html')[0];
    }
  }