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

@David thanks! I'll look into it and give it a go. I guess is this one, right?: https://github.com/fgnass/domino — vhbazan, May 29 '20 at 10:56
Yes, there are plenty of examples out there. Also, depending on where your arror is, you can try not to instantiate the editor if the code is rendered server side, using `isPlatformbrowser` checks — David, May 29 '20 at 11:01

score 0 · Answer 1 · answered May 29 '20 at 00:01

0

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.

answered May 29 '20 at 00:01

S P

4,615
2
18
31

Thanks for your answer, but my point was to find a way to get the CkEditor working when using SSR, so I will go for the domino option as @David mentioned. – vhbazan May 29 '20 at 10:56
2

any solution to handle this issue ? – surekha shelake May 10 '21 at 04:35
I have the same problem. There should be a solution for this. especially people migrating code – numerical25 Aug 23 '21 at 20:23

Angular Universal + CkEditor5: window is not defined

1 Answers1