Angular 9 SSR Build Serve eror -- ERROR ReferenceError: document is not defined

These globals include window, document, localStorage, indexedDB, setTimeout and setInterval are you can not use in angular universal app

Use document object from Anguar common module

Import from library

import { DOCUMENT } from '@angular/common';

Inject in service

@Inject(DOCUMENT) private document: Document,

Despite its title, it looks like your question is more about slow TTFB than the error with document being undefined.

Regarding that undefined document error, the solution is to:

• use the following injection @Inject(DOCUMENT) private document if the error appears in your own code

• use domino if the error appears in 3rd party libraries if you can't replace these libs with other ones that work with angular universal.

To solve the slow TTFB, there is no magic solution. Try to avoid rendering components that do not absolutely need to be rendered server side, make sure you don't have long running API calls, use caching

In the documentation it's stated that: Some common browser APIs and capabilities might not be available on the server. Applications cannot make use of browser-specific global objects like window, document, navigator, or location as well as certain properties of HTMLElement.

In general, code which relies on browser-specific symbols should only be executed in the browser, not on the server. This can be enforced through the afterRender and afterNextRender lifecycle hooks. These are only executed on the browser and skipped on the server.

So your code that relies on browser specific APIs should be moved to afterRender and afterNextRender lifecycle hooks. For example

import { Component, ViewChild, afterNextRender } from '@angular/core';
@Component({
selector: 'my-cmp',
 template: `<span #content>{{ ... }}</span>`,
 })
export class MyComponent {
 @ViewChild('content') contentRef: ElementRef;
  constructor() {
   afterNextRender(() => {
    // Safe to check `scrollHeight` because this will only run in the 
    browser, not the server.
    console.log('content height: ' + 
    this.contentRef.nativeElement.scrollHeight);
});

} }

You could use also afterRender(). You would need to restart your server for the changes to show up

If you have a library that is not compatible with Angular Universal, you should not render this package on the server and you should render it on the client after the response is returned from the server.

isBrowser = false;
constructor(@Inject(PLATFORM_ID) private platformId) {
  this.isBrowser = isPlatformBrowser(this.platformId);
}

now you have to use that package like this:

if (this.isBrowser) {
  ... use package
}

Or you can use ngIf in the html code.