Angular web-component is registered twice

555 views Asked by At

I created an Angular 10 webelement component and registered it to NgModule like this:

    export class AppModule implements DoBootstrap {
    constructor(private injector: Injector) {}
    ngDoBootstrap(appRef: ApplicationRef) {
      const element = createCustomElement(LogsComponent, {
        injector: this.injector,
      });
      customElements.define("logs-component", element);
  }
}

Then I added two scripts in my package.json file to pack and build my web-component :

    "build:elements": "ng build --prod --aot --project elements --output-hashing none && npm run pack:elements && cp projects/elements/package.json dist/elements",

   "pack:elements": "cat ./dist/elements/*.js > dist/logs-viewer-component.js && ls -lah dist/logs-viewer-component.js"

After running 'npm run build:elements' script I get logs-viewer-component.js that I then deploy to a server behind nginx reverse proxy.

I want to append this web-component to a specific component inside another Angular app by adding

        const logsComponentElement = document.createElement('logs-component');
        const logsComponentElementContainer = document.getElementById('ng-container');
        logsComponentElementContainer.appendChild(this.logsComponentElement);

and by adding script tag into header tag in index.html file :

<script src="http://localhost:8080/components/logs-viewer-component/logs-viewer-component.js"></script>

The problem is: I always have this error after build the parent Angular app :

logs-viewer-component.js:1 DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "x-component" has already been used with this registry
    at CustomElementRegistry.t.<computed> [as define] (http://localhost:8080/components/logs-viewer-component/logs-viewer-component.js:1:1512891)

Note:

I don't get this error in serve mode.

Edit:

After adding this condition before define element :
if (!customElements.get('logs-component')) {
      console.log('inside if')
      customElements.define('logs-component', element);
    }

I no longer have the error but nothing appears in DOM.

0

There are 0 answers