Angular & Polymer elements- Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry' when I have two Polymer elements imported

[msbasanth]

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'

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?

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

1. Create multiple Polymer elements
2. Create an Angular application
3. import 2 Polymer elements created in one Angular component
4. We will get above mentioned error.

Expected Results

No error is thrown

Browsers Affected

• [ X] Chrome
• [ X] Firefox
• [ ] Edge
• [ ] Safari 11
• [ ] Safari 10
• [ ] IE 11

Versions

Polymer v3.0.0

Regards Basanth

[stale[bot]]

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.