SVGLoader and ERROR TypeError: Quill is not a constructor

[sm3xegg]

I am currently trying to integrate ngx-quill with Image Resize Module in an Angular 17 Project with standalone components. Unfortunately, this does not work.
With the packages:
"ngx-quill": "^24.0.4"
"quill-image-resize-module-ts": "^3.0.3"
i get the following errors:

./node_modules/quill/assets/icons/align-right.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewbox="0 0 18 18">
|   <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
|   <line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>

Without the Image Resize Module everything is working fine.

In the next step I tested the latest version feat/quill-2.beta0, as I think that the previous error no longer exists here. But this gives me the error:

ERROR TypeError: Quill is not a constructor
    quillSubscription ngx-quill.mjs:371
    Angular 3
    quillSubscription ngx-quill.mjs:370
    RxJS 7
    Angular 25
    webpackJsonpCallback jsonp chunk loading:77
    <anonymous> node_modules_quill_quill_js.js:1

Your example of the version feat/quill-2.beta0 works perfectly, at least without Image Resize.
Do you have any tips on how I can get the new beta version running and configure image resize in the second step? Thanks in advance

[KillerCodeMonkey]

Just check my pr: #1632

I am not using quill 2 beta.2 currently, but this branch works for me without any error.

[KillerCodeMonkey]

updated the branch with latest ngx-quill beta and quill rc.0. everything is working :)

[sm3xegg]

Thanks for the update! Your example works perfectly. However, I always get the error ERROR TypeError: Quill is not a constructor quillSubscription ngx-quill.mjs:371 Angular 3 quillSubscription ngx-quill.mjs:370 RxJS 7 Angular 25 webpackJsonpCallback jsonp chunk loading:77 <anonymous> node_modules_quill_quill_js.js:1 in my project because I only use standalone components and therefore have no app.module.ts. I tried to include the module via importProvidersFrom(QuillModule.forRoot()) in the main.ts, but unfortunately the error persists. In an old commit before the migration to standalone ngx-quill works without problems. I have now included the latest version of quill without ngx quill and that works.

[KillerCodeMonkey]

For standalone try to use

import { provideQuillConfig } from 'ngx-quill/config';

bootstrapApplication(AppComponent, {
  providers: [
    provideQuillConfig({
      modules: {
        syntax: true,
        toolbar: [...]
      }
    })
  ]
})

[KillerCodeMonkey]

If this is Not working please create a stackblitz or repo for reproduction

[sm3xegg]

Thanks for the quick reply and support. Unfortunately, it still does not work. I have created a demo project where the error occurs. Here the Quill Editor is not displayed after starting and the error appears in the browser console. Here is the link: https://github.com/sm3xegg/ngx-quill-test-issue

[KillerCodeMonkey]

seems like when producing mjs files it is importing quill as jsm as well and the "default" export is different. i published a new beta release, please try that one

25.0.0-quill2.7

[sm3xegg]

Thank you for the quick solution, it is working now! I’m also looking to add image resizing in the editor. Does this somehow work in the new version? Thanks again!

[KillerCodeMonkey]

i comment those things out, because it was not working out of the box.

[sm3xegg]

All right!