1

我一直在使用 Angular Elements 来构建微前端，当每个微前端都是一个完全隔离的微前端时，一切正常。

<script src="bundle-a.js"></script>
<script src="bundle-b.js"></script>
<a-component></a-component>
<b-component></b-component>

但是，我注意到如果 Angular Elements 嵌套使用来自多个微前端的组件，这会引入一些 UI 问题，这些问题很难修复

<script src="bundle-a.js"></script>
<script src="bundle-b.js"></script>
<a-component>
    <b-component></b-component>
</a-component>

例如，以这种方式嵌套组件会导致以下问题：

- 更改检测需要手动触发（见https://github.com/angular/angular/issues/24061）

-Transclusion 无法正常工作（请参阅https://github.com/angular/angular/issues/24536）

- 无法动态创建或销毁组件（可能与上面的变更检测问题有关）

用例是另一个微前端引用的可重用 UI 组件（例如按钮或数据表）。

对此的替代方法是将通用 UI 组件作为 NPM 依赖项包含在每个微前端中。但是，这种方法的缺点是，如果常见的 UI 组件发生变化，我就需要重新构建每个消费应用程序。

有没有人有什么建议？重要的是每个微前端都可以独立构建和部署，因此应该将其作为运行时 JS 包含而不是作为 NPM 依赖项来引用。

从我目前的研究来看，Angular Elements 似乎是为独立的微应用设计的，而不是一个可以跨多个微前端共享的 UI 组件库。

谢谢，

亚历克斯

4

0 回答 0