Angular element with Hot Module Replacement causing duplicated customElements.define

Question

In my DoBootstrap, I setup the Angular element with

    const webComponentTag = 'ui-button'
    customElements.define(webComponentTag,  createCustomElement(UIButtonComponent, {injector}));

Note there is no way to remove a definition from registered custom elements.

If I serve with --hmr, I will get this error during reload:

Answer 1

You can add a condition to check if the element already has already been defined.

if (!customElements.get('ui-button')) {
  const webComponentTag = 'ui-button'
  customElements.define(webComponentTag,  
  createCustomElement(UIButtonComponent, {injector}));
}