[Custom Components] How to use custom angular components in different modules? #772
Description
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