CKEditor 5 extra plugin passed as a function doesn't work in Angular 10

[Alexander091]

Hi! I am trying to add custom upload adapter to my ckeditor using an example: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html But I am getting an error:

ckeditor.js:5 plugincollection-load Object 
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-plugincollection-load
r @ ckeditor.js:5

core.js:4442 ERROR Error: Uncaught (in promise): TypeError: t is not a constructor
TypeError: t is not a constructor
    at ckeditor.js:5
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at ckeditor.js:5
    at l (ckeditor.js:5)
    at Array.map (<anonymous>)
    at Cn.init (ckeditor.js:5)
    at Rb.initPlugins (ckeditor.js:5)
    at ckeditor.js:5
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at Function.create (ckeditor.js:5)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27492)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

see source code: https://github.com/Alexander091/angular-ckeditor5

That happened when I upgraded to Angular 10.

Thank you!

[ma2ciek]

Hi @Alexander091,

I'm not sure why it happens. I guess that it might be again a problem with the Zone.js as there's a lot of Zone.js mess in the stack trace. 

Could you test if it works when your plugin would implement the Plugin interface API instead of being a function?

[Alexander091]

Hi @ma2ciek

Thank you for the advice. Indeed that works. I use original CKFinderUploadAdapter as an example I only changed the implementation of UploadAdapter

If plugin as function doesn't work anymore, could you please update docs, at least. But that feature very convenient and helps to avoid any changes in my custom editor.

[ma2ciek]

It seems to be a bug, so I'd rather fix it than describe this exception in docs. But in 99% it seems to be on the Angular's side.

[Simon245]

I've just updated from Angular 7 to 9, I had the mentions plugin working with customized output. Since updating, I am getting this error, I haven't been able to find a fix for this.

[pieroxy]

I'm using Mithril.js (not Angular) and did a few changes to my dependencies and toolchain: I migrated from Parcel to Webpack, upgraded my version of typescript and did other things that I'm too lazy to look up. It stopped working after my changes with this error.

I fixed it by using a function instead of an arrow function.

I got from ( editor:any ) => { ... } to function ( editor:any ) { ... } and everything is back to normal.

Hope it helps

[milon27]

I'm using Mithril.js (not Angular) and did a few changes to my dependencies and toolchain: I migrated from Parcel to Webpack, upgraded my version of typescript and did other things that I'm too lazy to look up. It stopped working after my changes with this error.

I fixed it by using a function instead of an arrow function.

I got from ( editor:any ) => { ... } to function ( editor:any ) { ... } and everything is back to normal.

Hope it helps

works

[pomek]

The latest CKEditor 5 Angular component does not support Angular 10. Hence, I am closing the issue. If you can still reproduce it, please, report a new issue, and we will look at that.

[raineorshine]

@pomek It's not Angular specific. There's a report in Mithril and I ran into it using Vue.

It appears that the extraPlugins functions are expected to be able to bind to a different this. However, this is an incorrect assumption in the case of arrow functions, which cannot be re-binded.

[pomek]

cc: @Witoso ☝️