我将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简化为组件和模块)
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版本:
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
我希望有人可以帮助我解决这个问题或为我指明正确的方向,因为这是我可以完成此项目之前需要解决的最后一个问题。
您可以尝试在导入结束时删除.js吗?
来自:从'./../../../../ckeditor/ckeditor.js'中导入*作为编辑器;
至:从'./../../../../ckeditor/ckeditor'中导入*作为编辑器;