CODEWITHSUNDEEP
angulartypescriptserver-side-rendering
Adam
Adam

Reputation: 361

Angular 7 SSR got ReferenceError: document is not defined

I am using Angular 7 in my project and I want to add SSR (Server Side Rendering) to my project. I using command

ng add @nguniversal/express-engine --clientProject matngular

So they adding a bunch of files. Then I am continuing with command

npm run build:ssr

And the build was succeded. So I start serving that dist folder by using command

npm run serve:ssr

So I got error like below

D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:205940
'function' === typeof document.createEvent ? function CustomEvent (type, params) {
                  ^

ReferenceError: document is not defined
at Object.eventmap (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:205940:23)
at __webpack_require__ (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:20:30)
at Object.NativeCustomEvent (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:205812:19)
at __webpack_require__ (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:20:30)
at Object.<anonymous> (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:205097:17)
at __webpack_require__ (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:20:30)
at Module.<anonymous> (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:204339:65)
at __webpack_require__ (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:20:30)
at Object.ng2-dragula (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:156920:18)
at __webpack_require__ (D:\git-workspace\the-seagate-suite\seagate-web\dist\server.js:132440:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:ssr: `node dist/server` 
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional 
logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2020-11- 
20T07_04_53_246Z-debug.log

I already tried Stackoverflow's solutions accepted answers. But none was working for me. My Angular project version is 7.3.6 and typeScript is 3.2.4. Thanks.

Upvotes: 3

Views: 5654

Answers (1)

Alexey Sapozhnikov
Alexey Sapozhnikov

Reputation: 136

Adam,

as Angular documentation states:

Because a Universal app doesn't execute in the browser, some of the browser APIs and capabilities may be missing on the server.

For example, server-side applications can't reference browser-only global objects such as window, document, navigator, or location.

Angular provides some injectable abstractions over these objects, such as Location or DOCUMENT; it may substitute adequately for these APIs. If Angular doesn't provide it, it's possible to write new abstractions that delegate to the browser APIs while in the browser and to an alternative implementation while on the server (aka shimming).

You can try inject a Document instance via Angular Dependency Injection in the constructor of your component or service:

constructor(@Inject(DOCUMENT) private document: Document) {}

Upvotes: 4

Related Questions