I am using a custom build of ckEditor5 for Angular which is stored in ckeditor.d.ts locally:

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Italic, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import type { EditorConfig } from '@ckeditor/ckeditor5-core';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Heading } from '@ckeditor/ckeditor5-heading';
import { Indent } from '@ckeditor/ckeditor5-indent';
import { Link } from '@ckeditor/ckeditor5-link';
import { List, ListProperties } from '@ckeditor/ckeditor5-list';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { Undo } from '@ckeditor/ckeditor5-undo';
declare class CustomClassicEditor extends ClassicEditor {
    static builtinPlugins: (typeof Alignment | typeof Autoformat | typeof BlockQuote | typeof Bold | typeof CloudServices | typeof Essentials | typeof Heading | typeof Indent | typeof Italic | typeof Link | typeof List | typeof ListProperties | typeof Paragraph | typeof PasteFromOffice | typeof Table | typeof TableToolbar | typeof TextTransformation | typeof Underline | typeof Undo)[];
    static defaultConfig: EditorConfig;
}
export default CustomClassicEditor;

I have added a custom plugin locally as well:

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

export default class CustomPlugin extends Plugin {
    init() {
        const editor = this.editor;
        editor.ui.componentFactory.add('customPlugin', locale => {
            const view = new ButtonView(locale);
            view.set({
                label: 'Custom Plugin',
                // icon: icon,
                tooltip: true
            });
            // Callback executed once the button is clicked
            view.on('execute', () => {
                this.doTheThings();
            });
            return view;
        });
    }
    doTheThings() {
        // TODO: the things
    }
}

Then I add this custom Plugin to my editorConfig:

<ckeditor                        
 [editor]="Editor" 
 [config]="editorConfig"
 ...

this.editorConfig =  {
 alignment: {
  options: ['left', 'right', 'center', 'justify']
 },
 extraPlugins: [CustomPlugin],
 toolbar: ['undo','redo','heading','|','bold','italic','underline','alignment','link','bulletedList','numberedList','|','indent','outdent','|','blockQuote','insertTable','|','customPlugin','|'],

and I am getting the following build errors:

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
|  */
| 
> @import "../../mixins/_unselectable.css";
| @import "../../mixins/_dir.css";
| 

./node_modules/@ckeditor/ckeditor5-ui/theme/components/icon/icon.css:6:0 - Error: Module parse failed: Unexpected token (6: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
|  */
| 
> .ck.ck-icon {
|       vertical-align: middle;
| }

./node_modules/@ckeditor/ckeditor5-ui/theme/globals/globals.css:6:0 - Error: Module parse failed: Unexpected character '@' (6: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
|  */
| 
> @import "./_hidden.css";
| @import "./_zindex.css";
| @import "./_transition.css";



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/operators **


× Failed to compile.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names   | Raw Size
runtime.js          | runtime |  8.48 kB | 

4 unchanged chunks

Build at: 2024-06-11T17:00:03.502Z - Hash: 2efae6870512eaab - Time: 1614ms

./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css:6:0 - Error: Module parse failed: Unexpected character '@' (6: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
|  */
| 
> @import "../../mixins/_unselectable.css";
| @import "../../mixins/_dir.css";
| 

./node_modules/@ckeditor/ckeditor5-ui/theme/components/icon/icon.css:6:0 - Error: Module parse failed: Unexpected token (6: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
|  */
|
> .ck.ck-icon {
|       vertical-align: middle;
| }

./node_modules/@ckeditor/ckeditor5-ui/theme/globals/globals.css:6:0 - Error: Module parse failed: Unexpected character '@' (6: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
|  */
|
> @import "./_hidden.css";
| @import "./_zindex.css";
| @import "./_transition.css";

ckeditor packages:

    "@ckeditor/ckeditor5-angular": "^7.0.1",
    "@ckeditor/ckeditor5-basic-styles": "^41.2.1",
    "@ckeditor/ckeditor5-build-classic": "^41.4.2",
    "@ckeditor/ckeditor5-core": "^41.2.1",
    "@ckeditor/ckeditor5-editor-classic": "^41.4.2",
    "@ckeditor/ckeditor5-engine": "^41.2.1",
    "@ckeditor/ckeditor5-highlight": "^41.2.1",
    "@ckeditor/ckeditor5-ui": "^41.4.2",
    "@ckeditor/ckeditor5-utils": "^41.2.1",
    "@ckeditor/ckeditor5-watchdog": "^41.2.1",

ng version output:

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1602.14
@angular-devkit/build-angular      16.2.14
@angular-devkit/core               16.2.14
@angular-devkit/schematics         16.2.14
@angular/cdk                       16.2.14
@angular/cli                       16.2.14
@angular/material                  16.2.14
@angular/material-moment-adapter   16.2.14
@schematics/angular                16.2.14
ng-packagr                         16.2.3
rxjs                               7.5.7
typescript                         5.1.6
zone.js                            0.13.3

Has anyone else had this problem and can help with resources and/or tips to fix this?

Thanks a lot!

in the the ts file where my ckeditor tag is:

• adding the custom plugin to the plugins array

In the custom build of ckEditor:

• adding the custom plugin to the builtinPlugins array (different errors)

I was expecting to see a ButtonView button show up at the end of my ckeditor toolbar