问题标签 [micro-frontend]

我们有一个跨多个团队管理的应用程序，我们希望通过使用微前端方法在应用程序之间创建灵活性和隔离性，每个应用程序都有自己的商店。

一些应用程序使用相同的数据，我们希望减少从服务器获取的重复数据的数量。

我知道在这种情况下听起来我们应该使用一个商店，但是选择了所有准备好使用多个商店。

在商店之间同步数据的最佳方式应该是什么以及如何？

几点：

• 所有数据均来自我们的后端服务
• 数据结构相同，但并非所有应用程序都使用相同的数据，有些应用程序使用数据的子集
• 为了减少 API 调用的重复，我们希望“小型存储”能够同步来自“主”存储的数据

我刚开始学习 angular 2，我对我认为可能的情况有疑问。

我有一个微服务模型，其中我有与每个微服务相关联的角度应用程序。

• 微服务 1 & ng app 1 - 用于处理用户的交易
• 服务 2 和 ng app 2 - 为用户计算所有适用的税款

如果我登陆应用程序 1，输入我的交易详细信息并单击继续按钮，我应该能够将税收计算所需的值与用户 ID 一起传递“全部”？

通过 URL 传递它应该可以工作，但我有用户 ID、事务 ID、交易金额等以确保安全。

我是否能够通过 ngOnInit() 或通过某个生命周期事件传递它，以便 ng app 2 获取这些详细信息，并根据传递的 init 参数加载带有税值的页面？帮我解决这个问题：）

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

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

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

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

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

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

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

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

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

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

谢谢，

亚历克斯

我正在使用以下标准进行概念验证：

1. 允许每个菜单项位于不同的 Bitbucket 项目中。
2. 在不破坏其他组件的情况下构建单个组件。
3. 组件可以相互通信。
4. 如果其中一个组件更新，所有应用程序都必须自动查看该组件的最新版本。
5. 所有团队都将使用以下版本：
   • 角 CLI：7.0.7
     
   • 节点：10.13.0
     
   • 角度：7.0.4
     

我使用 Angular 元素做了一个示例，扩展了 HTML。
每个 Angular 团队通过注册其标签生成 JavaScript 文件（team1.js、team2.js、team3.js）来进行部署。

例子：

具有菜单的主 Angular 应用程序导入 JavaScript 文件（team1.js、team2.js、team3.js），当单击每个菜单时，标签会在 div 主目录中动态创建。

例如，如果任何团队需要访问 Web 服务来填充表格，则表格会在之前呈现。
因此，我在 web 服务中执行请求，然后动态创建表标记并将参数传递给流行。
在 Angular 项目中，它可以正常工作而无需此操作。但是对于 Angular 元素，我就是这样：

所有这些都有效，但我发现很难使用 createElement。

我可以在主项目中提出这个网络服务请求并通过参数：

有了这个，对 web 服务的所有请求都将在主项目中，所有团队都必须在这个项目中编码。

1. 还有其他可能性吗？
2. 你能继续那样做吗，但用一种不那么复杂的方式？

我有一个名为AppComponent的角度容器组件。我想在AppComponent中加载我的非角度组件HelloComponent。

我的实际目标是将现有的旧组件加载到 Angular 6 组件中。

我的角度代码如下：

如何将此HelloComponent注入此类。

html customElements 不起作用。

我正在研究如何将我们的单体应用拆分为微前端。我认为我发现 Web Components 对我来说是最好的方式，但我想更好地理解。这就是我的 Web App 现在的样子：

1. 多个 Web 应用程序，它们公开导出 Web 组件的 js 文件。在渲染时，Web 组件将渲染例如 Vue app/react 等...
2. 根 index.html，用于导入 Web 应用程序 ( <script src="domain.com/micro-app1.js">) 并使用它们 (" <micro-app1>")。

我的问题是，使用这种方法，我所有的微应用程序包都已加载（因为使用 导入<script src>）。有懒加载方式吗？

还有其他更好的方法吗？

微前端是一种用于前端 Web 开发的微服务方法。

微服务是一种架构风格，它将应用程序构建为围绕业务领域建模的小型自治服务的集合。

但

微前端和微服务之间的主要区别是什么？.

我试图通过使用 Angular 和 single-spa 来构建一个演示，看看这是否可以成为我们未来的发展道路。这是我试图借用的例子。

https://github.com/PlaceMe-SAS/single-spa-angular-cli-examples

但是，我发现当路由到另一个应用程序时，例如：点击 Open Help 或 App1，控制台会出现类似“ERROR: Expected to not be in Angular Zone, but it is!”的错误。

我在互联网上做了一些研究，试图解决这个错误。但是，我没有找到解决方案。我还向该项目提交了一个问题。我只是想知道是否有人知道这里的这个错误。

先感谢您！

我有这个角度应用程序，它基本上使用了库的概念。

我有 2 个名为 Lib1和lib2的库，根据它们所服务的微服务进行分组。

现在我将这些库导入到主应用程序，即App1中，直到现在。

现在，Lib1 有一个组件UploadComponent负责上传所有类型的媒体文件视频、图像、Docs 等。在 App1 中使用组件选择器或通过路由加载时，它可以正常工作。

Lib2 有一个组件CreateComponent需要上传功能，所以我导入UploadComponent并在模态窗口中调用它。但是在上传完成后，这个组件会发出一些消息，但我无法捕捉到，因为Createcomponent和UploadComponent在不同的库中。

有谁知道如何处理这种情况？

这是将数据从 UI 添加到不同微服务的延续。这个问题是关于将 BE 拆分为微服务的。现在，我也在寻找一种将 UI 分解为微前端的方法。

假设您有一个用户注册表单，您在其中填写：名字、姓氏、年龄、地址、首选通信方式：短信、电子邮件（单选按钮）。您有 2 个微服务：

UserManagement service Communication service 当用户注册时，我们应该在 2 个服务中创建 2 个聚合：UserManagementContext 中的 User 和 Communication 中的 UserCommunicationSettings。所以我觉得我应该有来自 2 个微服务的 2 个不同的 UI 组件，但是如何将它们放在 UI 上的 1 种形式中呢？当用户点击提交按钮时会发生什么，这些组件如何将数据发送到他们的服务？