Angular 6生产构建中CKEditor 5异常：本地正常部署出错

我之前也踩过这个坑——本地开发和普通构建都正常，一跑生产构建部署就出问题，这种情况基本都是Angular生产环境的优化机制和CKEditor的打包逻辑冲突导致的，尤其是Tree Shaking、CommonJS模块处理或者样式丢失的问题，给你几个针对性的解决方案：

1. 允许CommonJS依赖（最常见的解决方式） #

CKEditor 5的官方build包是基于CommonJS格式的，而Angular生产构建默认会对CommonJS模块做严格处理，容易导致必要代码被误删或者加载异常。你可以在tsconfig.json的angularCompilerOptions里添加允许的CommonJS依赖：

{
  "angularCompilerOptions": {
    "enableIvy": true,
    // 保留你原有其他配置
    "allowedCommonJsDependencies": [
      "@ckeditor/ckeditor5-build-classic"
    ]
  }
}

添加后重新执行ng build --prod，大概率能解决报错问题。

2. 手动引入CKEditor样式 #

你看到的“奇怪三角符号”很可能是样式丢失导致的占位符，生产构建可能没有正确打包CKEditor的样式文件。可以在angular.json的build.options.styles里手动引入CKEditor的CSS：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.css"
            ],
            // 保留你原有其他配置
          }
        }
      }
    }
  }
}

3. 调整生产构建的优化策略 #

如果上面的方法没用，可以尝试降低Angular生产构建的优化强度，避免Tree Shaking误删CKEditor的代码。在angular.json的configurations.production里修改：

{
  "configurations": {
    "production": {
      // 保留你原有其他配置
      "optimization": {
        "scripts": false,
        "styles": {
          "minify": true,
          "inlineCritical": false
        },
        "fonts": true
      }
    }
  }
}

注意：关闭脚本优化会增加打包后的代码体积，所以这个作为备选方案。

4. 检查版本兼容性 #

确认你的Angular版本和@ckeditor/ckeditor5-build-classic版本是否匹配，比如Angular 12+建议使用CKEditor 5 29及以上版本，版本不匹配也可能导致生产构建后运行异常。可以执行npm list @ckeditor/ckeditor5-build-classic查看版本，必要时升级或降级CKEditor包。

按照上面的步骤逐一尝试，应该能解决你的问题。

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