[Custom Components] How to use custom angular components in different modules?

[keke086]

Hi, I just register a custom component 'RatingComponent' successfully in the forked project 'formio/angular-demo' according to the guide (https://github.com/formio/angular-formio/wiki/Custom-Components-with-Angular-Elements).

• If I call registerCustomComponent(injector) in AppModule, the 'RatingComponent' works well in the 'DataComponent' but not

in the 'CustomBuilderComponent'; export class AppModule { constructor(injector: Injector) { registerCustomComponent(injector); } }

• If I call registerCustomComponent(injector) in FormsModule, form-builder in DataComponent will not show the RatingComponent. export class FormsModule { constructor(injector: Injector) { registerCustomComponent(injector); } }

• If I call registerCustomComponent(injector) in both, then I get the error ERROR Error: Uncaught (in promise): NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "app-rating" has already been used with this registry Error: Failed to execute 'define' on 'CustomElementRegistry': the name "app-rating" has already been used with this registry at CustomElementRegistry.target.<computed> [as define] (zone.js:2222) at registerCustomFormioComponent (register-custom-component.ts:24) at registerCustomComponent (custom-component.formio.ts:152) at new FormsModule (forms.module.ts:46) at Object.FormsModule_Factory [as factory] (ɵinj.js? [sm]:1) at R3Injector.hydrate (core.js:11380) at R3Injector.get (core.js:11201) at core.js:11238 at Set.forEach (<anonymous>) at R3Injector._resolveInjectorDefTypes (core.js:11238) at resolvePromise (zone.js:1255) at resolvePromise (zone.js:1209) at zone.js:1321 at ZoneDelegate.invokeTask (zone.js:434) at Object.onInvokeTask (core.js:28522) at ZoneDelegate.invokeTask (zone.js:433) at Zone.runTask (zone.js:205) at drainMicroTaskQueue (zone.js:620)

Can someone help please? Thanks

[jaspereira19]

Same doubt.

However as workaround, I replaced the use of the function registerCustomFormioComponent by:

  registerCustomTag(COMPONENT_OPTIONS.selector, injector);
  if (!customElements.get(COMPONENT_OPTIONS.selector)) {
    var complexCustomComponent = createCustomElement(UsersComponent, { injector: injector });
    customElements.define(COMPONENT_OPTIONS.selector, complexCustomComponent);
  }
  Components.setComponent(COMPONENT_OPTIONS.type, createCustomFormioComponent(COMPONENT_OPTIONS));

This is the same behaviour with the validaiton if the selector is register in CustomElementRegistry (https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry)

Seems to work for now