CODEWITHSUNDEEP
angularserver-side-renderingangular-universalangular9
Techie Sakthi
Techie Sakthi

Reputation: 83

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

ERROR ReferenceError: document is not defined

import { readFileSync } from 'fs';
const domino = require('domino');  // import the library `domino`
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString(); // use `index.html` as template
const win = domino.createWindow(template); // create object Window
global['window'] = win;
global['Event'] = win.Event;               // assign the `win.Event` to prop `Event`
global['document'] = win.document;

Even Adding this in Server.ts Fixing Issue But In Performance TTFB Time is Too High. Any Having the Solution...?

Upvotes: 7

Views: 16875

Answers (5)

sidibe
sidibe

Reputation: 81

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

Upvotes: 1

Mojtaba Nejad Poor Esmaeili
Mojtaba Nejad Poor Esmaeili

Reputation: 1352

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.

Upvotes: 0

David
David

Reputation: 34435

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

Upvotes: 4

Nouli
Nouli

Reputation: 261

try to use the DOCUMENT constant provided by the @angular/common package

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable()
export class MyService {
  constructor(@Inject(DOCUMENT) private document: Document) {}
}

Upvotes: 19

gaurav_thakkar
gaurav_thakkar

Reputation: 127

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,

Upvotes: 6

Related Questions