title: CKEDITOR5 - Angular8 : TypeError: this.editor.create is not a function
body: <p>I am trying to integrate CKEDITOR 5 in my Angular 8 project. I have created custom super build with additional plugins and with both ClassicEditor and InlineEditor(using this guide: <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#creating-super-builds" rel="noreferrer">https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#creating-super-builds</a>).</p>
  
  <p>I have imported <code>CKEditorModule</code> into my shared module file.
  Below is my component file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import * as CKEDITOR from '@ckeditor/ckeditor5-build-classic';
  
  @Component({
      templateUrl: './cke5.html',
      styleUrls: ['./cke5.scss'],
      selector: 'app-cke5'
  })
  export class CKE5  {
  
      loader: any;
  
      public CEditor = CKEDITOR.ClassicEditor.create( document.querySelector( '#editor' ), {
          extraPlugins: [ this.imageUploadAdapterPlugin ],
      } )
      .catch( error =&gt; {
          console.log( error );
      } );
  
      constructor() {
          console.log(CKEDITOR.ClassicEditor);
      }
  
      uploadImage() {
          return this.loader.file
              .then( file =&gt; new Promise( ( resolve, reject ) =&gt; {
                  console.log('UPloading..');
              } ) );
      }
  
      abortImageUpload() {
          console.log('Abort image upload.')
      }
  
      imageUploadAdapter(loader: any) {
          this.loader = loader;
  
          const uploadInterface = {
              upload: this.uploadImage,
              abort: this.abortImageUpload
          };
  
          return uploadInterface;
      }
  
      imageUploadAdapterPlugin( editor ) {
          editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) =&gt; {
              return this.imageUploadAdapter(loader);
          };
      }
  }
  </code></pre>
  
  <p>With this I am getting error <code>TypeError: this.editor.create is not a function</code>:</p>
  
  <pre><code>zone-mix.js:3267 ERROR TypeError: this.editor.create is not a function
      at CKEditorComponent.push../node_modules/@ckeditor/ckeditor5-angular/fesm5/ckeditor-ckeditor5-angular.js.CKEditorComponent.createEditor (ckeditor-ckeditor5-angular.js:311)
      at ckeditor-ckeditor5-angular.js:173
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
      at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
      at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:26215)
      at CKEditorComponent.push../node_modules/@ckeditor/ckeditor5-angular/fesm5/ckeditor-ckeditor5-angular.js.CKEditorComponent.ngAfterViewInit (ckeditor-ckeditor5-angular.js:169)
      at callProviderLifecycles (core.js:21414)
      at callElementProvidersLifecycles (core.js:21388)
      at callLifecycleHooksChildrenFirst (core.js:21378)
      at checkAndUpdateView (core.js:29448)
  console.&lt;computed&gt; @ zone-mix.js:3267
  View_CKE5_0 @ CKE5.ngfactory.js? [sm]:1
  proxyClass @ compiler.js:20828
  push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:30271
  push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:4050
  (anonymous) @ core.js:27137
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:26215
  push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:27137
  (anonymous) @ core.js:26998
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  onInvoke @ core.js:26256
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:26170
  next @ core.js:26998
  schedulerFn @ core.js:23735
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
  push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
  push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:23719
  checkStable @ core.js:26225
  onLeave @ core.js:26292
  onInvokeTask @ core.js:26250
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
  push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
  push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
  ZoneTask.invoke @ zone.js:487
  timer @ zone.js:3070
  processImmediate @ internal/timers.js:439
  Show 3 more frames
  
  zone-mix.js:3267 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}}
  console.&lt;computed&gt; @ zone-mix.js:3267
  View_CKE5_0 @ CKE5.ngfactory.js? [sm]:1
  proxyClass @ compiler.js:20828
  push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:30271
  push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:4055
  (anonymous) @ core.js:27137
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:26215
  push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:27137
  (anonymous) @ core.js:26998
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  onInvoke @ core.js:26256
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:26170
  next @ core.js:26998
  schedulerFn @ core.js:23735
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
  push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
  push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:23719
  checkStable @ core.js:26225
  onLeave @ core.js:26292
  onInvokeTask @ core.js:26250
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
  push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
  push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
  ZoneTask.invoke @ zone.js:487
  timer @ zone.js:3070
  processImmediate @ internal/timers.js:439
  Show 3 more frames
  
  zone.js:391 TypeError: Cannot convert undefined or null to object
      at Function.keys (&lt;anonymous&gt;)
      at Xa.init (ckeditor.js:5)
      at Xa.&lt;anonymous&gt; (ckeditor.js:5)
      at Xa.fire (ckeditor.js:5)
      at Xa.&lt;computed&gt; [as init] (ckeditor.js:5)
      at ckeditor.js:5
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
      at Object.onInvoke (core.js:26256)
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
      at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
  </code></pre>
  
  <p>However, If I just assign <code>CKEDITOR.ClassicEditor</code> without calling <code>create</code> in above code, it works fine, editor is loading and working fine.</p>
  
  <pre><code>public CEditor = CKEDITOR.ClassicEditor;
  </code></pre>
  
  <p>What am I doing wrong here? Any help is appriciated.</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>After going through docs, I found my error. With below changes, I was able to get it working.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import CKEDITOR from '@ckeditor/ckeditor5-build-classic';
  
  @Component({
      templateUrl: './cke5.html',
      styleUrls: ['./cke5.scss'],
      selector: 'app-cke5'
  })
  export class CKE5  {
      public CEditor = CKEDITOR.ClassicEditor;
      loader: any;
  
      public editorConfig = {
          extraPlugins: [  ]
      };
  
      constructor() {
      }
  
      public onReady( editor ) {
  
          editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) =&gt; {
              // Configure the URL to the upload script in your back-end here!
              return this.imageUploadAdapter(loader);
          };
      }
  
      imageUploadAdapter(loader: any) {
          this.loader = loader;
  
          const uploadInterface = {
              upload: () =&gt; { return this.uploadImage(this); },
              abort: () =&gt; { return this.abortImageUpload(this); }
          };
  
          return uploadInterface;
      }
  
      uploadImage(that: any) {
          return that.loader.file
              .then( file =&gt; new Promise( ( resolve, reject ) =&gt; {
                  console.log('UPloading..');
              } ) );
      }
  
      abortImageUpload(that: any) {
          console.log('Abort image upload.')
      }
  }
  </code></pre>
  
  <p>And in template:</p>
  
  <pre><code>&lt;ckeditor [editor]="CEditor" (ready)="onReady($event)" [config]="editorConfig" data="&lt;p&gt;Hello, world!&lt;/p&gt;"&gt;&lt;/ckeditor&gt;
  </code></pre>