带Angular universal / SSR的Ngx-Quill和ImageResize

Question

您好，我正在尝试使用ImageResize的Ngx-羽毛笔。我就是不能让它工作。

我找到了像这样的“半解决方案”：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

这让我绞尽脑汁，但我开始在控制台上记录传统导入和动态导入的结果，并意识到所有动态导入都在一个名为"default“的子属性下。

在构造器中检查到您处于浏览器环境中之后，您会想要更像这样的东西(我更喜欢将我的导入承诺与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
  });

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

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