ngx-quill with Angular Elements

I’m building an Angular 13 custom element / web component that uses ngx-quill. Here are the versions for the packages in my package.json:

 "ngx-quill": "^16.1.1",
"@angular/elements": "~13.0.2",
"@angular/core": "~13.0.2",

I build the web component app using the command: ng build plots-elements --output-hashing none . When I navigate to my component in the consuming app I get a blank area where the component is supposed to render and I get the error:

..\..\dist\plots-elements\runtime.js:formatted:194 GET http://localhost:4202/263.js net::ERR_ABORTED 404 (Not Found)
r.l @ ..\..\dist\plots-elements\runtime.js:formatted:194
r.f.j @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
r.e @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
Dm @ ..\..\dist\plots-elements\runtime.js:formatted:194
h @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
ZoneAwarePromise @ zone.js:1387
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
_trySubscribe @ ..\..\dist\plots-elements\runtime.js:formatted:194
subscribe @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
subscribe @ ..\..\dist\plots-elements\runtime.js:formatted:194
ngAfterViewInit @ ..\..\dist\plots-elements\runtime.js:formatted:194
Ig @ ..\..\dist\plots-elements\runtime.js:formatted:194
pg @ ..\..\dist\plots-elements\runtime.js:formatted:194
xa @ ..\..\dist\plots-elements\runtime.js:formatted:194
zo @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
zo @ ..\..\dist\plots-elements\runtime.js:formatted:194
gd @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
zo @ ..\..\dist\plots-elements\runtime.js:formatted:194
gd @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
zo @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
zo @ ..\..\dist\plots-elements\runtime.js:formatted:194
gd @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
zo @ ..\..\dist\plots-elements\runtime.js:formatted:194
gd @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
zo @ ..\..\dist\plots-elements\runtime.js:formatted:194
Mv @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
hd @ ..\..\dist\plots-elements\runtime.js:formatted:194
detectChanges @ ..\..\dist\plots-elements\runtime.js:formatted:194
tick @ ..\..\dist\plots-elements\runtime.js:formatted:194
(anonymous) @ ..\..\dist\plots-elements\runtime.js:formatted:194
invoke @ zone.js:372
onInvoke @ ..\..\dist\plots-elements\runtime.js:formatted:194
invoke @ zone.js:371
run @ zone.js:134
run @ ..\..\dist\plots-elements\runtime.js:formatted:194
next @ ..\..\dist\plots-elements\runtime.js:formatted:194
__tryOrUnsub @ ..\..\dist\plots-elements\runtime.js:formatted:194
next @ ..\..\dist\plots-elements\runtime.js:formatted:194
_next @ ..\..\dist\plots-elements\runtime.js:formatted:194
next @ ..\..\dist\plots-elements\runtime.js:formatted:194
next @ ..\..\dist\plots-elements\runtime.js:formatted:194
emit @ ..\..\dist\plots-elements\runtime.js:formatted:194
dp @ ..\..\dist\plots-elements\runtime.js:formatted:194
ev @ ..\..\dist\plots-elements\runtime.js:formatted:194
onInvokeTask @ ..\..\dist\plots-elements\runtime.js:formatted:194
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1600
globalZoneAwareCallback @ zone.js:1626
Show 32 more frames
2..\..\dist\plots-elements\runtime.js:formatted:194 ERROR ChunkLoadError: Loading chunk 263 failed.
(error: http://localhost:4202/263.js)
    at Object.r.f.j (..\..\dist\plots-elements\runtime.js:formatted:194:NaN)

Everything else in my project works. The component works in an Angular app / imported as an Angular library. When it is compiled as an Angular Element and imported into a vanilla js page, it doesn’t work. Is there a way to fix this or is there a work around?

[RazeiXello]

For any fellow Googlers.

I modified the above code and it seems to work for our Angular 13 project with Angular Elements.

import { Inject, Injectable, Injector, Optional } from '@angular/core';
import { defaultModules, QuillConfig, QuillService, QUILL_CONFIG_TOKEN } from 'ngx-quill';
import quill from 'quill';

@Injectable({
  providedIn: 'root'
})
export class CustomQuillService extends QuillService {
  constructor(
    injector: Injector,
    @Optional() @Inject(QUILL_CONFIG_TOKEN) public override config: QuillConfig
  ) {
    super(injector, config);

    // https://github.com/KillerCodeMonkey/ngx-quill/blob/6a42c119e2a4bb66db158f1cdbc085b9cb801fb4/projects/ngx-quill/src/lib/quill.service.ts#L16
    this['Quill'] = quill;

    if (!this['config']) {
      this['config'] = { modules: defaultModules };
    }
  }
}

and in the module

  providers:[
    { provide: QuillService, useClass: CustomQuillService }
  ],

I assume because this prevents the code in this if statement from executing:

https://github.com/KillerCodeMonkey/ngx-quill/blob/6a42c119e2a4bb66db158f1cdbc085b9cb801fb4/projects/ngx-quill/src/lib/quill.service.ts#L16

Though this does also bypass the addEventListener unpatching.

[KillerCodeMonkey]

Since there is nothing I can do or change. I would leave it closed.

Did you tried the things mentioned in the comments above? Overwriting the quill service and using quilljs from the window Object instead of importing it?

In general I have never used angular elements. But if you need an alternative to ngx-quill try stencil-quill. It compiles to a native web component and can be used in angular, but without angular form controls/models.