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.