ERROR Error: Uncaught (in promise): ReferenceError: document is not defined when run app angular ssr

Question

When i run "npm run dev:ssr". It work correctlly. However, when I run it, it gives an error at the rendered file. How can i fix it:

ERROR Error: Uncaught (in promise): ReferenceError: document is not defined
ReferenceError: document is not defined
    at Object.<anonymous> (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:33548:12)
    at __nested_webpack_require_697__ (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:25923:30)
    at Object.<anonymous> (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:26917:1)
    at __nested_webpack_require_697__ (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:25923:30)
    at Object.<anonymous> (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:31542:14)
    at __nested_webpack_require_697__ (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:25923:30)
    at Object.<anonymous> (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:35932:13)
    at __nested_webpack_require_697__ (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:25923:30)
    at Object.<anonymous> (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:37444:18)
    at __nested_webpack_require_697__ (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\711.js:25923:30)
    at resolvePromise (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\main.js:112980:21)
    at resolvePromise (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\main.js:112927:11)
    at D:\MC\front_end_tickmi\dist\tickmi_frontend\server\main.js:113054:11
    at _ZoneDelegate.invokeTask (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\main.js:112019:173)
    at Object.onInvokeTask (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\main.js:180612:33)
    at _ZoneDelegate.invokeTask (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\main.js:112019:56)
    at Zone.runTask (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\main.js:111769:39)
    at drainMicroTaskQueue (D:\MC\front_end_tickmi\dist\tickmi_frontend\server\main.js:112239:25) {

Does this duplicate of below? https://stackoverflow.com/questions/60636286/angular-9-ssr-build-serve-eror-error-referenceerror-document-is-not-defined — Helphin, Oct 19 '22 at 10:20

score 0 · Answer 1 · answered Oct 25 '22 at 18:45

While trying to use ssr, you don't have access to any DOM on the server side, hence you are getting such errors. If you are using document in any of your angular component then I would suggest you to simply keep a plat form checker in order to avoid errors in server side and use the document only in browser.

But in a lot of cases document is used by some higher level dependencies which you can not manually handle. A work around can be using a shadow dom for the server and introduce document globally. You can use domino for such case. Insert the following code in you server.ts

const domino = require("domino");
const fs = require("fs");
const path = require("path");
const template = fs
  .readFileSync(path.join("dist/<you-app-name>/browser", "index.html"))
  .toString();
const window = domino.createWindow(template);
global["window"] = window;
global["document"] = win.document;

There are similar questions available for this, check out them for details

ERROR Error: Uncaught (in promise): ReferenceError: document is not defined when run app angular ssr

1 Answers1