Angular 17集成CKEditor报错求助：需通过NgModule导入组件

问题原因 #

Angular 17 默认采用独立组件架构，而 CKEditorComponent 并非独立组件，无法直接在独立组件的 imports 数组中导入，必须通过 NgModule 间接引入。

解决步骤 #

1. 创建 CKEditor 包裹模块 #

新建 ckeditor.module.ts 文件，用自定义 NgModule 封装 CKEditor 官方模块：

import { NgModule } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule({
  imports: [CKEditorModule],
  exports: [CKEditorModule]
})
export class CKEditorWrapperModule { }

2. 在独立组件中导入包裹模块 #

修改目标组件文件，导入自定义的 CKEditorWrapperModule 和表单模块（因使用 ngModel 需依赖）：

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CKEditorWrapperModule } from './ckeditor.module';

@Component({
  selector: 'app-your-target-component',
  standalone: true,
  imports: [FormsModule, CKEditorWrapperModule],
  templateUrl: './your-target-component.component.html',
  styleUrls: ['./your-target-component.component.css']
})
export class YourTargetComponent {
  model = { description: '' };
}

3. 确认依赖安装 #

确保已安装 CKEditor 相关依赖包：

npm install @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic

4. 模板代码保持不变 #

目标组件的 HTML 模板继续使用原代码即可：

<ckeditor [(ngModel)]="model.description" name="description" id="description"></ckeditor>

内容的提问来源于stack exchange，提问作者Şenol Baş