Angular 17+esbuild集成CKEditor遇.svg无加载器配置问题求助

问题描述 #

使用CKEditor时，导入插件遇到以下错误：

No loader is configured for ".svg" files: node_modules/@ckeditor/ckeditor5-core/theme/icons/table.svg

版本信息：

Angular version: 17.1.2
@ckeditor/ckeditor5-angular: 7.0.1
@ckeditor/ckeditor5-build-classic: 41.0.0

配置代码：

import { Autoformat } from '@ckeditor/ckeditor5-autoformat'
export const CK_EDITOR_DEFAULT_CONFIG = {
   plugins: [
     // Essentials,
     // UploadAdapter,
     Autoformat,
   ]
}

已在src目录添加d.ts文件但无效：

declare module '*.svg' {
   const content: string
   export default content
}

疑问：搭配esbuild的Angular是否支持自定义加载器？有没有其他SVG加载器解决方案？

解决方案 #

方案一：直接使用预构建的CKEditor Classic包 #

你当前依赖的@ckeditor/ckeditor5-build-classic是官方预构建好的版本，已经内置了所有必要插件和资源处理逻辑，无需手动单独导入插件。修改配置：

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

export const CK_EDITOR_DEFAULT_CONFIG = {
  editor: ClassicEditor,
  // 可添加其他自定义配置，比如工具栏、语言等
};

预构建包会自动处理SVG等资源文件，避免加载器错误。

方案二：生成自定义CKEditor构建包（按需定制插件） #

如果需要精简插件组合，不要直接导入单个CKEditor插件，而是通过官方工具生成包含你所需插件的自定义构建包。构建后的包会内置资源处理逻辑，不会出现SVG加载问题。

方案三：配置esbuild处理SVG文件 #

Angular 17+使用esbuild时，支持通过angular.json添加自定义加载器：

1. 打开项目根目录的angular.json，找到对应项目的build配置，在options中添加esbuildOptions：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "esbuildOptions": {
            "loaders": {
              ".svg": "text"
            }
          },
          // 其他原有配置...
        }
      }
    }
  }
}

2. 确保TypeScript能识别你的SVG声明文件：
   在tsconfig.app.json的include数组中添加src/**/*.d.ts，确保d.ts文件被正确读取：

"include": [
  "src/**/*.d.ts",
  "src/**/*.ts",
  "src/**/*.html"
]

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