时间戳

首页 > 解决方案 > 由于第三方库，Angular App Shell 构建失败

angular - 由于第三方库，Angular App Shell 构建失败

问题描述

我无法让 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，对吧？我在这里缺少什么吗？

标签： angularprogressive-web-appsangular8app-shell

解决方案

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

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

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

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

推荐阅读