javascript - CKEditor 在构建后破坏了 Angular

Question

我在将 CKEditor 5 的自定义构建与 Angular 7(具体为 7.3.9)结合使用时遇到问题。编辑器使用 ng serve 没有问题，但是如果我在通过“ng build --prod”构建我的 Angular 页面后尝试访问包含 ckeditor 导入的组件，它会抛出任何一个

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 的自定义构建，文档对我帮助不大，因为没有关于如何使用自定义 CKEditor 构建构建 Angular 项目的文档。

我的项目结构如下:(使用CKEditor简化为组件和模块)

• 来源
  • 应用程序
    • 博客
      • 创建编辑帖子
        • 创建-编辑-post.component.html
        • 创建-编辑-post.component.ts
      • 博客.module.ts
  • ckeditor(包含自定义构建)
    • 翻译
    • ckeditor.js
    • ckeditor.js.map

博客.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 { }

创建-编辑-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>

创建-编辑-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 版本:

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

我希望有人能帮助我解决这个问题或指出正确的方向，因为这是我完成这个项目之前需要解决的最后一个问题。

Answer 1

您可以尝试将其导入为文档默认方法吗？

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