Multiple Angular Elements from different scripts

Question

Is it possible to use Angular Elements generated from diffrent scripts?

I have 2 projects weather-widget and clock widget which generates their own script(concated all required ones).

When I use these widgets individually it works fine but when these are used on same page it gives error shown as below:

DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
at CustomElementRegistry.define (http://172.27.147.64:8080/node_modules/document-register-element/build/document-register-element.js:2:18538)
at new AppModule (http://172.27.147.64:8080/dist/weather-widget/main.js:115:24)

Answer 1

The feature to have multiple angular micro apps on the same page is currently not supported.

The error that you see actually describes the issue well. When you load your second micro app, bootstrap will run and try to bootstrap the module by calling it's ngDoBootstrap method. If you do some detailed logging though, you will notice that it tries to invoke ngDoBootstrap on the first micro app for the second time. If you want to make this work, you would need to do some manual work to control the bootstrap process yourself and make sure to bootstrap the correct module when it is introduced on the page.

Resource

Answer 2

Use a unique tag name to define your Angular Element. That should prevent this issue.