Angular & Polymer elements- Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry' when I have two Polymer elements imported #5610
We have a WebComponent library based on Polymer & LitElement. I have it in a monorepo with yarn. With an Angular application when I import elements implemented using LitElement I could import multiple LitElement controls without any issue.
Same when I try importing Polymer elements I am getting below error Failed to execute 'define' on 'CustomElementRegistry'
zone.js:2241 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "dom-module" has already been used with this registry
at CustomElementRegistry.target.<computed> [as define] (http://localhost:4200/polyfills.js:5726:31)
at Module.../../../Yarn/tetwc/tet-web-components/packages/checkbox/build/checkbox.js (http://localhost:4200/main.js:403:860)
at __webpack_require__ (http://localhost:4200/runtime.js:80:30)
at Module../src/app/app.component.ts (http://localhost:4200/main.js:2000:99)
at __webpack_require__ (http://localhost:4200/runtime.js:80:30)
at Module../src/app/app.module.ts (http://localhost:4200/main.js:2037:72)
at __webpack_require__ (http://localhost:4200/runtime.js:80:30)
at Module../src/main.ts (http://localhost:4200/main.js:2107:73)
at __webpack_require__ (http://localhost:4200/runtime.js:80:30)
at Object.0 (http://localhost:4200/main.js:2131:18)
How can I import multiple elements in an Angular application?
One suggestion mentioned in the above link is this,
"It is caused by polymer modules which are nested in node_modules inside the top level node_modules directory."
Is removing the nesting is the right solution for this problem?
Steps to Reproduce
Create multiple Polymer elements
Create an Angular application
import 2 Polymer elements created in one Angular component
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Hi,
We have a WebComponent library based on Polymer & LitElement. I have it in a monorepo with yarn. With an Angular application when I import elements implemented using LitElement I could import multiple LitElement controls without any issue.
Same when I try importing Polymer elements I am getting below error Failed to execute 'define' on 'CustomElementRegistry'
How can I import multiple elements in an Angular application?
Anyone tried scripts provided here https://github.com/Polymer/polymer/issues/5407#issuecomment-478994182
One suggestion mentioned in the above link is this, "It is caused by polymer modules which are nested in node_modules inside the top level node_modules directory."
Is removing the nesting is the right solution for this problem?
Steps to Reproduce
Expected Results
No error is thrown
Browsers Affected
Versions
Polymer v3.0.0
Regards Basanth