angular - Ngx-Quill 和 ImageResize with Angular universal/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 不兼容。我尝试了很多使用 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 与 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>