CKEditor5 / Angular errors when including SourceEditing plugin

Question

Using Angular 18 + CKEditor 5 + Material Design:
When I add the SourceEditing plugin to the CKEDITOR config, it crashes.

Has anyone seen the errors below?

ERRORS ON COMPILE

./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. See https://webpack.js.org/concepts#loaders

(happening for every SVG file that CKEditor has)

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() {
}

}

Answer 1

You need to create a custom build in order to enable sourceEditing feature. You can create custom build from this official site: https://ckeditor.com/ckeditor-5/online-builder/ avoid premium plugins if you don't have license. after the zip file downloaded make a folder with src level below is the directory example

├── ckeditor5

│ ├── build │ ├── sample │ ├── src │ ├── ... │ ├── package.json │ └── webpack.config.js ├── node_modules ├── src ├── ... └── package.json

After every thing in place you need to install node-packages for editor and provide the path of directly in the component .ts file to that build for example: import Editor from 'ckeditor5-custom-build/build/ckeditor';