Angular Universal + CkEditor5: окно не определено - PullRequest
Новая
       132

Angular Universal + CkEditor5: окно не определено

0 голосов
/ 29 мая 2020

Я запускаю приложение, которое использует "@ckeditor/ckeditor5-angular": "1.2.3" и настроенную сборку CKeditor5 . Я добавил поддержку SSR (рендеринг на стороне сервера - Angular универсальный): 

ng add @nguniversal/express-engine

И когда я запускаю npm run dev:ssr, я получил следующую ошибку: 

  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.

Есть ли способ интегрировать CkEditor5 с Angular Universal? Или кто-нибудь знает обходной путь?

Большое спасибо

Ответы [ 2 ]

1 голос
/ 31 мая 2020

У вас есть два способа решить эту проблему:

  1. Внедрить PLATFORM_ID в качестве службы в желаемый компонент и после этого обернуть код проблемы c внутри условия как ниже: 

    import { isPlatformBrowser, isPlatformServer } from '@angular/common';
    import {Inject, OnInit, PLATFORM_ID} from '@angular/core';

    constructor (@Inject(PLATFORM_ID) private platformId: any) {}

    ngOnInit() {
        this.prepareCkeditor5();
    }

    prepareCkeditor5() {
        if (isPlatformBrowser(this.platformId)) {
            // Client mode detected
        } else if (isPlatformServer(this.platformId)){
            //  server mode detected
        }
    }
Используйте domino , чтобы сделать это автоматически

Примечание: первое решение кажется более настраиваемым, потому что, возможно, в этой сторонней библиотеке (ckeditor5) есть методы, которые могут быть компилируется даже в серверном режиме.

0 голосов
/ 29 мая 2020

Объект window недоступен во время рендеринга на стороне сервера, потому что ваш сервер (т.е. Node.JS) не имеет объекта window - это конструкция браузера.

Во время SSR вы не можете использовать код, который ссылается на специфичные для браузера c конструкции или объекты, такие как window или DOM.

...