来自不同脚本的多个 Angular 元素

Question

是否可以使用从不同脚本生成的Angular 元素？

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

当我单独使用这些小部件时，它工作正常，但是当它们在同一页面上使用时，会出现如下所示的错误：

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

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

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

资源