Angular 12生产模式编译CKEditor报Duplicate modules错误求助

方案1：调整angular.json生产编译配置 #

生产模式下默认启用的构建优化器会对CKEditor的预构建UMD包产生错误的模块拆分，导致重复打包。修改angular.json的production配置节点，添加允许的CommonJS依赖配置，可临时关闭buildOptimizer验证问题根源：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": true,
    "namedChunks": false,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": false,
    "allowedCommonJsDependencies": [
      "@ckeditor/ckeditor5-build-classic"
    ],
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "4mb",
        "maximumError": "5mb"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "6kb",
        "maximumError": "10kb"
      }
    ]
  }
},
"defaultConfiguration": ""

方案2：修改CKEditor导入方式 #

全量导入预构建包会触发模块重复识别，改为默认导入即可：
将业务组件中的导入代码替换为：

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

如果ts编译提示无默认导出，在tsconfig.json的compilerOptions节点添加配置：

"allowSyntheticDefaultImports": true

方案3：对齐依赖兼容版本 #

当前使用的@ckeditor/ckeditor5-angular@2.x最高适配CKEditor构建包28.x版本，和你使用的29.2.0版本存在兼容冲突，可二选一调整版本：

• 降级CKEditor构建包：

  npm install @ckeditor/ckeditor5-build-classic@28.0.0
  

• 升级Angular适配包：

  npm install @ckeditor/ckeditor5-angular@3.0.0
  

方案4：全局引入避免模块打包 #

直接将CKEditor预构建文件作为全局脚本引入，跳过模块编译链路：

1. 在angular.json的scripts节点添加配置：

   "scripts": [
     "node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"
   ]
   

2. 删除业务组件中原有的CKEditor import语句，替换为全局声明：

   declare const ClassicEditor: any;
   

内容的提问来源于stack exchange，提问作者Declan