由于第三方库，Angular App Shell 构建失败答案

【问题标题】：Angular App Shell build fails due to third party libraries由于第三方库，Angular App Shell 构建失败
【发布时间】：2020-02-06 15:24:30
【问题描述】：

我无法让 Angular App Shell 正常工作。所以我按照说明配置了通用项目。然后我也设置了App Shell，可以看到我的angular.json底部的配置很好。但是现在当我跑步时

ng run proj:app-shell

我收到窗口未定义的错误。该错误是有道理的，因为我使用了直接使用窗口的第三方库（在本例中为 ckeditor），但无法从服务器端 Node.js 环境访问窗口。

但是我不确定为什么会出现这个错误，因为 ckeditor 是在一个不同的组件中使用的，它不应该是 app-shell 的一部分。

这是我的 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 在我导入 app.module.ts 的 ElementsModule 中的 text-element-component 中使用

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

但是为什么我的 app-shell 构建失败了，它不应该使用 app.module.ts，而是 app.server.module.ts，对吧？我在这里遗漏了什么？

【问题讨论】：

标签： angular progressive-web-apps angular8 app-shell

【解决方案1】：

我在这上面浪费了很多时间。问题是 ckeditor 脚本在加载时立即引用了窗口，因此它在以下行中崩溃：

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

我在组件构造函数中使用了动态导入：

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

【讨论】：