ckeditor not displayed after upgrading to angular 18

[graphicsxp]

I opened a ticket here yesterday : https://github.com/ckeditor/ckeditor5/issues/16580 but I realize that the problem is probably related to the ckeditor5-angular package.

I'm using latest version of this package and version 41.4.2 of ckeditor (with a custom build).

Works just fine with angular 17 but after upgrading to angular 18, it does not show. I get some exceptions (more details in the other ticket).

Can you please fix this ?

[graphicsxp]

I have created a sample based on your own source code. I added a component CustomBuildComponent, and I added my custombuild javascript file in the assets folder.

That custombuild works perfectly in your sample Then I upgraded the sample to angular 14, 15, 16, 17, and finally 18. And it breaks in 18, similarly to my own angular application.

Could you please take a look ? This issue is important as it stops us from upgrading to angular 18

ckeditor5-angular-master.zip

[zozjo]

Adjust Type Definition The issue can often be resolved by explicitly typing the Editor property. Here's how you can adjust the type definition:

1- Create a type definition for the CKEditor.

ckeditor.d.ts

declare module '@ckeditor/ckeditor5-build-classic' {
  const ClassicEditorBuild: any;

  export = ClassicEditorBuild;
}

2- Use this type definition in your component. and it's will work fine

[graphicsxp]

Sorry but :

1. I don't understand your reply because I use my own custom build, which i import like this : import * as CustomEditor from '../../assets/ckeditor.js';
   so I don't see how this would work. Can you make it work in the sample in attachment above ?

2. why do i even have to do that all of a sudden ? My custom build was working just fine in angular 17. And as I highlighted it in my ticket, I can repro the issue in the ckeditor-angular sample. Could someone from the dev team look at it ?

[yess-webioza]

I just hadsame problem. My solution:

instead of:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
...
public Editor = ClassicEditor;
....

do it like this:

import ClassicEditorBase from '@ckeditor/ckeditor5-build-classic';
...
public Editor = ClassicEditorBase;
...

[graphicsxp]

@yess-webioza , you upgraded from angular 17 to angular 18 and you had the same problem ? Or you just had an issue with your custom editor not loading regardless of angular version ?

I'm not importing from '@ckeditor/ckeditor5-build-classic' , I'm using a custom build, please check the provided sample.

[yess-webioza]

@yess-webioza , you upgraded from angular 17 to angular 18 and you had the same problem ? Or you just had an issue with your custom editor not loading regardless of angular version ?

I'm not importing from '@ckeditor/ckeditor5-build-classic' , I'm using a custom build, please check the provided sample.

I've upgraded from ng 16 to 18 and editor was not rendering anymore. (no erros in console, no errors durinb building application)

[graphicsxp]

I assume you have created the build with the online builder ?

can you show me how you reference the custom build in your angular project ? or in the provided sample ?

Do you put the build folder in your angular assets folder ?

I tried your fix but ClassicEditorBase does not exist for me

[yess-webioza]

I assume you have created the build with the online builder ?

can you show me how you reference the custom build in your angular project ? or in the provided sample ?

Do you put the build folder in your angular assets folder ?

I tried your fix but ClassicEditorBase does not exist for me

In my case, there was just standard / classic usage (described in quickstart here: https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/angular.html#quick-start).

But i just tried to build custom build to test it. I've copied build folder directly into sources of my app (next to src as described in here: https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/angular.html#integrating-a-build-from-the-online-builder

then just referenced it like this: import ClassicEditorBase from '../path/to/build/ckeditor'; in component.

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import ClassicEditorBase from '../path/to/build/ckeditor';
// other imports

@Component({
    selector     : 'component-abc',
    templateUrl  : './component-abc.component.html',
    encapsulation: ViewEncapsulation.None,
    standalone   : true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports      : [
        // ...
        CKEditorModule,
       // ...
    ],
})
export class ComponentABCComponent implements OnInit, OnDestroy
{
    private _unsubscribeAll: Subject<any> = new Subject<any>();

    public Editor = ClassicEditorBase;

    /**
     * Constructor
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _formBuilder: UntypedFormBuilder,
    )
    {
    }

[graphicsxp]

ok, that works indeed if I follow your instructions.

However this is not what I want to do. I want to keep referencing the minified js file in the angular assets folder (and not having to add to my angular app all the other files that are part of the custom build folder). This used to work prior to angular 18, so it should keep working and I cannot figure out what has changed or what needs to be done. I tried to add the type definition file but no success

[graphicsxp]

I added all 3 files that are in the build/ckeditor folder (ckeditor.js, ckeditor.js.map and ckeditor.d.ts) to my assets folder and it still doesn't work. I honneslty dont see what the difference between referencing these files from the assets folder or from the build/ckeditor folder like you do (and which works)

[graphicsxp]

ah made it work !

I changed import * as Editor from '../../assets/ckeditor'; to

import Editor from '../../assets/ckeditor';´

thanks for helping !