来自不同脚本的多个Angular Elements [英] Multiple Angular Elements from different scripts

问题描述

是否可以使用从不同脚本生成的 Angular Elements ?

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

我有2个项目weather-widget和Clock小部件，它们生成了自己的脚本(包括所有必需的脚本).

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)

推荐答案

当前不支持在同一页面上具有多个角度微型应用程序的功能.

您看到的错误实际上很好地描述了该问题.当您加载第二个微型应用程序时，引导程序将运行并尝试通过调用模块的ngDoBootstrap方法来引导模块.但是，如果您进行一些详细的日志记录，您会注意到它尝试第二次在第一个微型应用程序上调用ngDoBootstrap.如果要进行此工作，则需要做一些手动工作来自己控制引导过程，并确保在页面上引入正确的模块后进行引导.

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.

资源

这篇关于来自不同脚本的多个Angular Elements的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！