javascript - CKEditor שובר את Angular אחרי ng build

יש לי בעיה בשימוש בבנייה מותאמת אישית של CKEditor 5 בשילוב עם Angular 7 (7.3.9 כדי להיות מדויק). העורך עובד ללא בעיה עם ng serve, אבל אם אני מנסה לגשת לרכיבים המכילים ייבויי ckeditor לאחר בניית דף Angular שלי באמצעות "ng build --prod" זה מייצר או

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

או

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

כאשר אני מסיר את ההערה על הייבוא של CKEditor ומבצע בנייה מחדש, הכל עובד כפי שהוא צריך. אני משתמש בבניין מותאם אישית של CKEditor הקלאסי והתיעוד לא עזר לי הרבה כיוון שאין תיעוד על איך לבנות פרויקטים של Angular עם בניין מותאם אישית של CKEditor.

מבנה הפרויקט שלי הוא כדלקמן: (מופחת לרכיבים ומודולים באמצעות CKEditor)

• מקור

  • אפליקציה

    • בלוג

      • צור-ערוך-פוסט

        • create-edit-post.component.html
        • צור-ערוך-פוסט
        • צור-ערוך-פוסט.component.html

        • בלוג
        • צור-ערוך-פוסט
        • צור-ערוך-פוסט.component.html

        • אפליקציה
        • בלוג
        • צור-ערוך-פוסט
        • צור-ערוך-פוסט.component.html

        • צור-ערוך-פוסט.component.ts
      • בלוג.מודול.ts

  • ckeditor (כולל את הבנייה המותאמת אישית)

    • תרגומים
    • ckeditor.js
    • ckeditor.js.map

בלוג.מודול.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 { }

צור-ערוך-פוסט.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>

צור-ערוך-פוסט.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 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

אני מקווה שמישהו יוכל לעזור לי לתקן את הבעיה הזו או להדריך אותי בכיוון הנכון כיוון שזו הבעיה האחרונה שצריכה להיפתר לפני שאוכל לסיים את הפרויקט הזה.

תשובה #1

האם אתה יכול לנסות לייבא את זה כדרך ברירת מחדל של התיעוד?

ייבא * כמו עורך מ'@ckeditor/ckeditor5-build-classic';

תשובה #2

לפי התיעוד של CKEditor, האם וידאת שמכוונים ל-es6 או גרסה גבוהה יותר? או להגדיר "buildOptimizer": false בקובץ tsconfig.json?