Angular Universal + CkEditor5: window is not defined

Question

I'm running an `` application that uses "@ckeditor/ckeditor5-angular": "1.2.3" and a customised build of CKeditor5. I added SSR (Server Side Rendering - Angular Universal) support:

ng add @nguniversal/express-engine

And when I run npm run dev:ssr I got the following error:

  ReferenceError: window is not defined
        at Object../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:117340:3242)
        at __webpack_require__ (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:20:30)
        at Object../src/app/post/new-edit-tutorial/new-edit-tutorial.component.ts (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:228444:23)
        at __webpack_require__ (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:20:30)
        at Object../src/app/post/post.module.ts (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:229101:39)
        at __webpack_require__ (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:20:30)
        at Object../src/app/app.module.ts (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:227134:23)
        at __webpack_require__ (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:20:30)
        at Object../src/app/app.server.module.ts (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:227205:22)
        at __webpack_require__ (/Users/user1/angular-ssr/dist/angular-ssr/server/main.js:20:30)

    A server error has occurred.

Is there any way to integrate CkEditor5 with Angular Universal? Or does anybody know any workaround?

Many thanks

user_359508 · Answer

The window object is not available during server side rendering because your server (i.e. Node.JS) does not have a window object - it is a browser construct.

During SSR you cannot use code that references browser-specific constructs or objects like window or the DOM.

Angular Universal + CkEditor5: window is not defined

1 Answers