CKEditor 5 throws Cannot read property 'create' of undefined in Angular6 project

Question

I've created a project using JHipster and trying to create a WYSIWYG rich text editor using CKEditor 5. I've done the below steps by using the following link to create an editor.

1. npm install --save-dev @ckeditor/ckeditor5-angular

2. npm install --save-dev @ckeditor/ckeditor5-build-classic

3. Imported @ckeditor/ckeditor5-angular and added in imports in my module.js

4. Imported @ckeditor/ckeditor5-build-classic and created a variable public Editor: ClassicEditor; in my component

5. Used following code in html

Blockquote

<ckeditor [editor]="Editor" data="<p>Hello world!</p>"></ckeditor> 

When I go to the page I added throws the following error which I got it from the browser developer tools console.

ERROR TypeError: Cannot read property 'create' of undefined
    at CKEditorComponent.createEditor (ckeditor-ckeditor5-angular.js?076d:187)
    at eval (ckeditor-ckeditor5-angular.js?076d:96)
    at ZoneDelegate.invoke (zone.js?d135:388)
    at Zone.run (zone.js?d135:138)
    at NgZone.runOutsideAngular (core.js?09c9:3784)
    at CKEditorComponent.ngAfterViewInit (ckeditor-ckeditor5-angular.js?076d:95)
    at callProviderLifecycles (core.js?09c9:9568)
    at callElementProvidersLifecycles (core.js?09c9:9542)
    at callLifecycleHooksChildrenFirst (core.js?09c9:9532)
    at checkAndUpdateView (core.js?09c9:10468)

I'm just wondering if that's an issue with CKEditor 5 or did I miss any steps?

Answer 1

You have the following code under the link:

export class ArticleUpdateComponent implements OnInit {
    public Editor: ClassicEditor;
    // ...
}

While you should actually set the ClassicEditor to the Editor property, you only set it's type (which is actually wrong too, since the editor can have type typeof ClassicEditor).

What you should do is simple property assignment public Editor = ClassicEditor;, which will make the ClassicEditor available in the template under the Editor property.

This error can be also thrown when the import is incorrect - depending on the TypeScript configuration the import should look like import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; or import ClassicEditor from '@ckeditor/ckeditor5-build-classic';.

Answer 2

Created a file src/app/typings.d.ts with below code

declare module '@ckeditor/ckeditor5-build-classic' { // or other CKEditor 5 build.
const ClassicEditorBuild: any;

export = ClassicEditorBuild;}

Inside your main app module, import CKEditorModule as below:

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule({imports: [CKEditorModule]})

Now, add import to the component where that issue was occurring in say x.component.ts

import * as ClassicEditorBuild from '@ckeditor/ckeditor5-build-classic';

export class x implements OnInit { public Editor = ClassicEditorBuild;constructor() { }  ngOnInit(): void {}}

Finally, add below code in your x.component.html

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>