Angular 18集成CKEditor 5添加SourceEditing插件编译报错求助

问题说明 #

在 Angular 18 + CKEditor 5 + Material Design 环境下，给 CKEditor 配置添加 SourceEditing 插件后，程序编译崩溃，所有 CKEditor 相关 SVG 文件均触发以下错误：

./node_modules/@ckeditor/ckeditor5-core/theme/icons/align-bottom.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

相关代码片段：

HTML 代码 #

<ckeditor [editor]="Editor" [config]="{ plugins: [sourceEditing], toolbar: [ 'bold', 'italic', 'sourceEditing' ] }" />

TypeScript 代码 #

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';

export class SomethingSomethingComponent implements OnInit {
  public Editor = ClassicEditor;
  public sourceEditing = SourceEditing;

  constructor() {
  }
}

解决办法 #

核心原因 #

Angular 18 默认基于 esbuild 的构建配置未适配 CKEditor 依赖中的 SVG 文件，导致编译时无法解析该类资源。

方案一：自定义 Webpack 配置处理 SVG #

1. 安装依赖

   npm install @angular-builders/custom-webpack svg-url-loader --save-dev
   

2. 新建 Webpack 配置文件
   在项目根目录创建 webpack.config.js，写入：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.svg$/,
           use: ['svg-url-loader'],
           include: /node_modules\/@ckeditor/
         }
       ]
     }
   };
   

3. 修改 Angular 配置
   打开 angular.json，将项目的 build 和 serve 构建器替换为自定义 Webpack 版本，并指定配置文件路径：

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // 保留原有其他配置...
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       "options": {
         "browserTarget": "你的项目名称:build"
       }
     }
   }
   

   注意将你的项目名称替换为实际项目名。

4. 重启开发服务

   ng serve
   

方案二：使用自定义 CKEditor 构建包 #

如果不想修改 Webpack 配置，可以按照 CKEditor 官方指引，使用 ckeditor5-cli 构建包含 SourceEditing 插件的自定义编辑器包，替换项目中原有的 @ckeditor/ckeditor5-build-classic 依赖。

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