尝试使用带角度应用的ckeditor5构建生产版本时出现错误

2024-05-19 • 问答

我在我的角度应用程序的组件中使用ckedtior5 。

它在本地没有问题，但是当我尝试构建产品时会抛出此错误

./ node_modules/@ckeditor/ckeditor5-angular/fesm5/ckeditor-ckeditor5-angular.js中的错误模块构建失败（来自./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack -loader.js）：TypeError：无法读取未定义的属性“种类”

我在错误中提到的文件中看不到任何名为“ kind”的属性

// Module

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
imports: [
// other imports
CKEditorModule
]

// Component
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
public Editor = ClassicEditor;

// Html
<div class="col-sm-12 col-lg-12 mt-4">
              <label>Info</label>
              <ckeditor [editor]="Editor"
               data="<p>Hello World</p>"></ckeditor>
  </div>

在我的情况下，我使用ckeditor4并在使用 build --prod

构建项目时遇到此错误

我通过在tsconfig.js中添加“ allowSyntheticDefaultImports”：true 来解决此问题：

"angularCompilerOptions": {
    "fullTemplateTypeCheck": true,"strictInjectionParameters": true,"allowSyntheticDefaultImports": true
  }

，然后在angular.json中将“ buildOptimizer”更改为false

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
                }
              ],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": false,"budgets": [
                {
                  "type": "initial","maximumWarning": "2mb","maximumError": "5mb"
                }
              ]
            }
          }
        }

参考：https://github.com/ckeditor/ckeditor4-angular/issues/78

我不知道问题出在哪里，但是我尝试使用ngx-quill作为替代品，并且在尝试构建--prod --aot时抛出相同的错误。

现在，我降级到ngx-quill（6.3.1）的较低版本，并且工作正常。

尝试使用带角度应用的ckeditor5构建生产版本时出现错误

braveboy0 回答：尝试使用带角度应用的ckeditor5构建生产版本时出现错误

大家都在问