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

问题描述

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

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

我有 2 个项目天气小部件和时钟小部件，它们生成自己的脚本(连接所有必需的脚本).

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)

推荐答案

目前不支持在同一页面上拥有多个 Angular 微应用的功能.

您看到的错误实际上很好地描述了问题.当您加载第二个微应用程序时，bootstrap 将运行并尝试通过调用它的 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 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！