Ckeditor5-angular: [Docs] The `CKEditorModule` should be imported into the module where the `<ckeditor>` component is used

[tgrosh]

After following the Angular integration instructions today, all I end up with is a build error as such:

Could not find a declaration file for module ‘@ckeditor/ckeditor5-build-classic’. ‘C:/..../node_modules/@ckeditor5/ckeditor5build-classic/build/ckeditor.js’ implicitly has an ‘any’ type.
Try ‘npm install @types/ckeditor__ckeditor5-build-classic’ if it exists or add a new declaration (.d.ts) file containing ‘declare module ‘@ckeditor/ckeditor5-build-classic’;’

Since there are no typings, I followed the second suggestion and created a simple ckeditor.d.ts file with just that line in it. declare module ‘@ckeditor/ckeditor5-build-classic’

That got me through the transpile ok now, but now I only get an error in the chrome console saying as such:

Uncaught error: Template parser errors: ‘ckeditor’ is not a known element

I literally followed these instructions exactly, and cannot get a working ckeditor5: in Angular. My guess is that there is either some extra secret steps I dont know about, or I am missing something...
https://creditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/Angular.html

[tgrosh]

Ok. So FYI. Isn’t this always how it works? After struggling this issue for days, I finally posted this issue. Then a few hours later I discovered and solved it. The instructions on the CKEditor instructions mention adding the CKEditorModule to the Imports of your module. But it needed to be in the Exports to work.

[Mgsy]

Hi, @tgrosh, we're glad that you managed to solve the issue.

The instructions on the CKEditor instructions mention adding the CKEditorModule to the Imports of your module. But it needed to be in the Exports to work.

@ma2ciek, could you verify it?

[ma2ciek]

Hi, @tgrosh! Sorry for the delay.

It's the first time I hear about that issue. I tried to reproduce it, but all worked fine without the need of exporting the CKEditorModule. See here: https://github.com/ma2ciek/ckeditor5-angular-test, especially the app.module.ts.

Maybe there are some extra steps needed to reproduce it? Could you also tell me which angular version do you use?

[Mgsy]

I'm closing it due to a lack of activity.

[KatjaLeonteva]

Had the same issue. It didn't work with import in app.module.ts. When I moved to a module, where the component using ckeditor is, it started working.

[kaburkett]

This error does appear to occur only when CKEditorModule is imported into the wrong module. The guide says to import into app.module, but, the CKEditorModule should in fact be imported into the same direct module that your component using it is in. If you have more than one module but follow the guide exactly, this error can occur. Import CKEditorModule into the same module your component is declared in to resolve this Angular error.

[ma2ciek]

Thanks!

Indeed, there's an error in docs. It should be fixed.

[piotr-mamenas]

I got here while looking for a fix for another problem but I got struck by ignorant comments and wanted to clarify something.

Exporting is required for ANY module, not only for CKEditor module if you are using it in some Shared Module.

So say you have a SharedModule which contains the import for CkEditor. Now, if you import this SharedModule in another Module which finally uses the Editor, the editor will not be available because its available only in the scope of SharedModule.. Exporting EXPLICITLY tells Angular that the Module (in this case CkEditor) should be available for consumers of SharedModule not only the SharedModule itself. This is not any issue with the editor, just implementation of the classical good ol' object oriented programming concept we usually refer to as Encapsulation.

Learn the framework before trying to code with it and you will spare a lot of headaches for other developers..