Ngx-Quill and ImageResize with Angular universal / SSR

Question

Hi I am trying to use Ngx-Quill with ImageResize. I just can't get it to work tho.

I found "half-solutions" like this one: Check the Link

After implementing this I can get it to work like expected when running on ng serve.

Thats how that looks in my app.component:

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

However if I am running on npm run dev:ssr it wont work since the imports are not compatible with ssr. I tried a lot of workaround swith domino but nothing worked out and I also try to avoid using domino.

So I tried to import it conditionally, so i wont get serverside errors like this:

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

Which keeps the ssr server clean, but leads to the following errors on client side when using a page with Quill-Editor:

Any ideas or workarounds?

What error do you get when you initially ran `npm run dev:ssr`? Did you try https://github.com/KillerCodeMonkey/ngx-quill/issues/91#issuecomment-358903936? — Akash, Sep 26 '20 at 05:37
nice article for image resizing https://blog.almightytricks.com/2020/10/21/ngx-quill-image-resize/ — Sangram Badi, Oct 21 '20 at 04:47

score 1 · Answer 1 · answered Nov 30 '20 at 23:48

This one had me wracking my brain, but I started console logging the traditional imports along with the results from the dynamic imports and realized everything was under a sub-property called "default" for all the dynamic imports.

After checking that you're in the browser environment in the constructor, you'll want something more like this (I prefer to combine my import promises with 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
  });

You'll also want to ensure that your quill editor is not applied to the DOM until this process is done because it does not update if you update the "modules" property.

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

Ngx-Quill and ImageResize with Angular universal / SSR

1 Answers1