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

Question

I'm new to the angular6. 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?

Any help/directions to solve this problem would be appreciated!

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';.