Angular 15项目集成Quilljs编辑器遇阻，寻求解决方案

问题背景 #

在 Angular 15 独立组件中集成 ngx-quill 时遇到以下类型错误：

ERROR
node_modules/ngx-quill/lib/quill-editor.component.d.ts:2:21 - error TS2614: Module "quill" has no exported member 'Delta'. Did you mean to use 'import Delta from "quill"' instead? 2 import QuillType, { Delta } from 'quill';

已执行依赖安装命令：

• npm install ngx-quill@latest
• npm install quill --save

尝试过修改 QuillModule.forRoot() 为 QuillModule、在 main.ts 中全局导入、手动导入 Delta 等方法均无效，仅通过 CDN 方式可正常运行编辑器。

核心原因 #

错误源于 Quill 版本与 ngx-quill 版本不兼容：最新版 Quill 2.x 中，Delta 改为默认导出而非命名导出，但当前安装的 ngx-quill 版本仍在使用命名导入的方式引用 Delta，导致类型校验失败。

解决方案 #

方法一：降级 Quill 到 1.x 版本（推荐，与 CDN 版本兼容） #

1. 卸载当前 Quill 版本：

npm uninstall quill

2. 安装 Quill 1.x 稳定版：

npm install quill@1.3.7 --save

方法二：调整独立组件与全局导入配置 #

1. 在 main.ts 中全局配置 QuillModule.forRoot()（确保仅调用一次）：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { QuillModule } from 'ngx-quill';

bootstrapApplication(AppComponent, {
  imports: [QuillModule.forRoot()]
});

2. 在独立组件 BeitragCreateComponent 中仅导入 QuillModule：

import { QuillModule } from 'ngx-quill';

@Component({
  standalone: true,
  imports: [SbbInputModule, QuillModule], // 移除 .forRoot()
  selector: 'app-beitrag-create',
  templateUrl: './beitrag-create.component.html',
  styleUrls: ['./beitrag-create.component.scss'],
})
export class BeitragCreateComponent {
  public quillconfig = {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike', 'image', 'video'],
        [{size: ['xsmall', 'small', 'medium', 'large', 'xlarge']}],
        [{align: []}],
        ['clean'],
        ['link']
      ]
    }
  };
}

方法三：引入 Quill 样式 #

确保在 angular.json 中添加 Quill 的样式文件（避免编辑器无样式）：

"styles": [
  "node_modules/quill/dist/quill.snow.css",
  "src/styles.scss"
]

组件模板使用 #

在 beitrag-create.component.html 中添加编辑器标签：

<quill-editor [modules]="quillconfig" theme="snow"></quill-editor>

内容的提问来源于stack exchange，提问作者EndrIT