Friday 25 September 2020

Ngx-Quill and ImageResize with Angular universal / SSR

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: https://github.com/KillerCodeMonkey/ngx-quill/issues/48#issuecomment-392150088 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:

enter image description here

Any ideas or workarounds?



from Ngx-Quill and ImageResize with Angular universal / SSR

No comments:

Post a Comment