CKEditor breaks Angular after ng build

Question

I have a problem using a custom build of CKEditor 5 in combination with Angular 7 (7.3.9 to be specific). The editor works without a problem with ng serve, but if I try to access components containing ckeditor imports after building my Angular page via "ng build --prod" it throws either

ERROR Error: Uncaught (in promise): TypeError: Super expression must either be null or a function
TypeError: Super expression must either be null or a function

or

ERROR Error: Uncaught (in promise): Error: Cannot find 'BlogModule' in './component/blog/blog.module'
Error: Cannot find 'BlogModule' in './component/blog/blog.module'

Once I comment out the import for CKEditor and rebuild everything works as it should. I'm using a custom build of the classic CKEditor and the docs didn't help me much as there is no documentation on how to build Angular projects with a custom CKEditor build.

The structure of my project is as follows: (reduced to the components and modules using CKEditor)

• src
  • app
    • blog
      • create-edit-post
        • create-edit-post.component.html
        • create-edit-post.component.ts
      • blog.module.ts
  • ckeditor (contains the custom build)
    • translations
    • ckeditor.js
    • ckeditor.js.map

blog.module.ts:

import { FormsModule } from '@angular/forms';
import { BlogRoutingModule } from './blog-routing.module';
import { BlogComponent } from './blog.component';
import { ViewPostComponent } from './view-post/view-post.component';
import { CreateEditPostComponent } from './create-edit-post/create-edit-post.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../../material.module';
import { DeletePostComponent } from './delete-post/delete-post.component';
import { PostsComponent } from './posts/posts.component';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule({
  declarations: [
    CreateEditPostComponent,
    ViewPostComponent,
    BlogComponent,
    DeletePostComponent,
    PostsComponent
  ],
  imports: [
    CommonModule,
    MaterialModule,
    FormsModule,
    CKEditorModule,
    BlogRoutingModule
  ],
  entryComponents: [
    DeletePostComponent
  ]
})
export class BlogModule { }

create-edit-post.component.html

<div style="display: flex; flex-direction: column;" class="user-list">
  <span style="display: flex;">
    <span class="spacer"></span>
    <button mat-raised-button color="primary" routerLink="/blog/posts">
      <mat-icon>arrow_back</mat-icon>
      Back
    </button>
  </span>
  <mat-form-field>
    <input matInput placeholder="Title" [(ngModel)]="title" required/>
  </mat-form-field>
  <ckeditor [editor]="editor" [(ngModel)]="model.editorData" style="color: black"></ckeditor>
  <mat-form-field>
    <input matInput placeholder="Tags" [(ngModel)]="tags" required/>
  </mat-form-field>
  <span style="display: flex;">
    <button mat-raised-button color="primary" (click)="preview()" [disabled]="!allowSave()">
      Preview
    </button>
    <span class="spacer"></span>
    <button mat-raised-button color="warn" routerLink="/blog/posts">
      Cancel
    </button>
    <button mat-raised-button color="primary" [disabled]="!allowSave()" style="margin-left: 8px;" (click)="save()">
      {{isCreate ? "Create" : "Save changes"}}
    </button>
  </span>
  <div *ngIf="showPreview" style="margin-top: 16px;">
    <mat-divider></mat-divider>
    <mat-card style="margin-top: 16px;">
      <h2 style="margin-bottom: 4px;">{{previewTitle}}</h2>
      <sub>Created by {{previewCreator}} on {{previewCreationDate}}.</sub>
      <mat-divider style="position: relative; margin-top: 8px;"></mat-divider>
      <div class="ck-content" style="overflow: hidden;" [innerHtml]="previewContent"></div>
    </mat-card>
  </div>
</div>

create-edit-post.component.ts

import { AuthenticationService } from './../../../core/service/authentication/authentication.service';
import { Post } from './../../../shared/model/post';
import { BlogService } from './../../../core/service/blog/blog.service';
import { Router, ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import * as Editor from './../../../../ckeditor/ckeditor.js';
import * as moment from 'moment';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-create-edit-post',
  templateUrl: './create-edit-post.component.html',
  styleUrls: ['./create-edit-post.component.scss']
})
export class CreateEditPostComponent implements OnInit {
  public editor = Editor;
  public model = {
    editorData: ''
  };

  public editorConfig = {

  };

  constructor(private router: Router, private route: ActivatedRoute,
          private blogService: BlogService, private authenticationService: AuthenticationService,
          private snackbar: MatSnackBar) {
this.isCreate = router.url.includes('blog/new');

if (!this.isCreate) {
  this.id = Number.parseInt(route.snapshot.params.id, 10);
  blogService.getById(this.id).subscribe(post => {
    if (!!post) {
      this.title = post.title;
      this.tags = post.tags;
      this.model.editorData = post.content;
      this.timesEdited = post.timesEdited;
    }
  });
}
  }

  ngOnInit() {
  }

  public allowSave(): boolean {
    ...
  }

  public preview() {
    ...
  }

  public save() {
    ...
  }
}

Angular version:

Angular CLI: 7.3.9
Node: 12.13.1
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.3.7
@angular/cli                      7.3.9
@angular/material                 7.3.7
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

I hope someone can help me fix this issue or point me into the right direction as this is the last issue that needs to be resolved before I can finish this project.

Answer 1

Can you try to import it as documentation default method?

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