Ngx-Quill 和 ImageResize 与 Angular 通用 / SSR

Question

您好，我正在尝试将 Ngx-Quill 与 ImageResize 一起使用。我就是无法让它工作。

我找到了像这样的“半解决方案”：Check the Link

在实现这个之后，我可以让它在 ng serve 上运行时按预期工作。

这就是我的 app.component 中的样子：

import * as QuillNamespace from 'quill';
const Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

但是，如果我在 npm run dev:ssr 上运行，它将无法工作，因为导入与 ssr 不兼容。我尝试了很多解决方法 swith domino，但都没有成功，我也尽量避免使用 domino。

所以我尝试有条件地导入它，所以我不会得到这样的服务器端错误：

constructor() {
    if (isPlatformBrowser(platformId)) {
      import('quill').then(quill => {
        const QuillNamespace: any = quill;
        import('quill-image-resize-module').then(ImageResize => {
          QuillNamespace.register('modules/imageResize', ImageResize);
        });
      });
    }
}

这使 ssr 服务器保持清洁，但在使用带有 Quill-Editor 的页面时导致客户端出现以下错误：

有什么想法或解决方法吗？

Answer 1

这个让我绞尽脑汁，但我开始控制台记录传统导入以及动态导入的结果，并意识到所有动态导入的所有内容都在一个名为“默认”的子属性下。

在构造函数中检查你是否处于浏览器环境中后，你会想要更多类似的东西（我更喜欢将我的导入承诺与 Promise.all 结合起来）

Promise.all([
    import('quill-image-resize'),
    import('quill'),
  ]).then(([ImageResize, Quill]) => {
    console.log({ Quill, ImageResize });
    // each has a "default" which is identical to the traditional import
    Quill.default.register('modules/imageResize', ImageResize.default);
    this.quillModules = { imageResize: {} }; //it's important to do this here
  });

您还需要确保在此过程完成之前不会将您的羽毛笔编辑器应用于 DOM，因为如果您更新“模块”属性，它不会更新。

   <quill-editor
    *ngIf="!!quillModules"
    [(ngModel)]="body"
    [modules]="quillModules"
  ></quill-editor>