Ошибка сборки Angular App Shell из-за сторонних библиотек

Question

У меня проблемы с работой Angular App Shell. Итак, я выполнил инструкции и настроил универсальный проект. Затем я также настроил App Shell и вижу, что конфигурация в нижней части моего angular.json хороша. Но теперь, когда я бегу

ng run proj:app-shell

Я получаю сообщение об ошибке, что окно не определено. Ошибка имеет смысл, потому что я использую сторонние библиотеки (в данном случае ckeditor), которые используют окно напрямую, но к нему нельзя получить доступ из серверной среды Node.js.

Однако я не уверен, почему я получаю эту ошибку, потому что ckeditor используется внутри другого компонента, который НЕ должен быть частью оболочки приложения.

Вот мой app.component.html

<app-nav-menu></app-nav-menu>
<div class="page-body" [ngClass]="{'sidebar-expanded': (sidebarExpanded | async)}">
  <app-sidebar></app-sidebar>
  <div class="page-content-wrapper">
    <div class="content-viewport">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>
<ngx-spinner type="ball-grid-beat" color="#696ffb" bdColor="rgba(200, 200, 200, 0.8)" size="medium"></ngx-spinner>

Ни один из компонентов app-nav-menu, app-sidebar и ngx-spinner не использует ckeditor! Ckeditor используется внутри компонента text-element, который находится внутри ElementsModule, который я импортирую в app.module.ts

import { ElementsModule } from './elements/elements.module';

Но почему это не работает для моей сборки оболочки приложения, которая должна использовать не app.module.ts, а app.server.module.ts, верно? Что мне здесь не хватает?

Answer 1

Я потратил на это много часов. Проблема заключалась в том, что скрипт ckeditor сразу же ссылался на окно при загрузке, так что он разбился во время следующей строки:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Вместо этого я использовал динамический импорт внутри конструктора компонента:

import('@ckeditor/ckeditor5-build-classic').then(e => { this.editor = e; });