Angular Element: DOMException: Failed to execute 'define' on 'CustomElementRegistry'

Question

I've created two custom elements using Angular Elements.

<capp-customtag1> is defined in customtag1.js 
<capp-customtag2> is defined in customtag2.js.

I load <capp-customtag1> with <script type="text/javascript" src="assets/customtag1.js"></script>. 

Similarly, for <capp-customtag2>

Separately, they work as intended. However, if I try to use both of them in the same project (an Angular 6 project), when I attempt to load the second script, I get the following error:

ERROR DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry.

The calls to CustomElementRegistry are made in customtag1.js and customtag2.js.

This is the code I use to create capp-customtag1 in the Angular Element AppModule constructor:

const el = createCustomElement(CustomTag1Component, {injector: this.injector});
customElements.define('capp-customtag1', el);

This is the code to create capp-customtag2 in the second project's AppModule constructor:

const el = createCustomElement(CustomTag2Component, {injector: this.injector});
customElements.define('capp-customtag2', el);

Why do both elements have the same custom element name? And, how can I fix the problem.

Thank you.

As I understand, you are registering each custom element in each .js file, then you are including them in an Angular 6 project and then registering each customtag again in the NgModule. Is that correct? — Bruno, Jul 06 '18 at 22:06
I am not registering the customtag again. I don't believe this is required. I simply use that customtag and load the js via a script tag. This works fine when only using one of the customtags. thanks. — RichardZ, Jul 06 '18 at 22:18
I think your custom elements are not the problem. Check this issue someone else had with Polymer: https://github.com/Polymer/polymer/issues/5194 — Bruno, Jul 06 '18 at 22:37
Seems like a similar issue. However, I'm not sure what that means as a solution for my problem? Independently created Angular Elements should coexist without a hack. — RichardZ, Jul 06 '18 at 22:55
I agree with you, but it seems that there is something under the hood when importing multiple angular bundles. Have you debugged your code in order to find when it crashes? — Bruno, Jul 06 '18 at 23:15
It seems like this is a known problem that is unresolved: https://github.com/angular/angular/issues/23732 — RichardZ, Jul 07 '18 at 20:17
variant of the same problem at https://stackoverflow.com/questions/54211849/uncaught-domexception-failed-to-execute-define-on-customelementregistry-th — jimmont, Aug 28 '19 at 16:24

score 7 · Answer 1 · answered Jun 14 '19 at 12:20

As suspected, it's a bundling issue. The root cause is that webpack (which drives the CLI) uses a runtime: webpackJsonp global, and you're overwriting that each time you load another bundle (which also defines webpackJsonp) - See webpack/webpack#3791 (comment). The CLI doesn't expose this option (things like this are why angular are not supporting this use case yet). You could (though I don't recommend it) manually rename that global webpackJsonp in each bundle to something unique.

You're also duplicating all the polyfills, which is likely to cause all kinds of unexpected results, as they're shimming native APIs and overwriting them at various times. Further, bundling a copy of all the angular packages into each bundle seems suboptimal.

For the moment, if you want to do this sort of use case, your likely best option is going to be to use something like rollup to build UMD bundles, that rely on angular's UMD bundles and exclude the angular source from each element's package. It's going to take some manual work.

Alternately, don't use the CLI to build the individual elements into binaries, treat them as libraries and bring them into the build properly, so you only have one webpack runtime.

I'd be keen to hear more about this approach – AndyD Sep 12 '19 at 03:00 — AndyD, Sep 12 '19 at 03:00

score 6 · Answer 2 · answered Feb 03 '20 at 21:38

6

I kept running into this error and I added a check to make sure the customElement was not already defined. Simply adding the following before defining the element should fix this error:

if (!customElements.get('webtest')) {  
    customElements.define('webtest', e3);
}

answered Feb 03 '20 at 21:38

doubleya

479
9
17

Worked for me.But i get warning as below DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "webtest" has already been used with this registry. – Hardik Patel Mar 23 '20 at 07:10
I was able to make use of the get method to prevent the error and didn't receive a DOM Exception. – Steve Giles Oct 08 '20 at 21:15

score 4 · Answer 3 · answered Nov 20 '19 at 05:28

I know this is quite late to answer but I faced the issue last night and these are my observations. Hope it helps others with this problem ahead.

The error is because of webpack conflict between the various angular applications on your page.

The solution is to change the jsonpFunction name in webpack.config.js of each of your web component applications.

Example:

module.exports = {
  //...
  output: {
    jsonpFunction: '<unique name for your application's json function>'
  }
};

Do this for both of your projects related to capp-customtag1 and capp-customtag1.

score 1 · Answer 4 · answered Feb 21 '19 at 10:46

I am facing similar kind of issue, what I have done is I put a hyphen in between the selector name.

my element selector name webtest to web-test

in app.module.js

before

const e3 = createCustomElement(WebelementTestComponent, { injector: this.injector });
customElements.define('webtest', e3);

after

const e3 = createCustomElement(WebelementTestComponent, { injector: this.injector });
customElements.define('web-test', e3);

then my problem has been solved.

Angular Element: DOMException: Failed to execute 'define' on 'CustomElementRegistry'

4 Answers4