问题标签 [micro-frontend]

我已经构建了 2 个带有角度元素的微型应用程序。使用 ngx-built-blus 和 --output-hashing 非 --single-bundle true 构建微应用程序。在 localhost 的 2 个不同端口上为他们提供服务。我目前面临以下问题。Shell 应用程序是一个常规的 Angular 应用程序

1. 除非我在 shell 应用程序中添加 polyfills.js 和 vendor.js 的脚本以及 main.js，否则它不会加载。Chrome给出了错误

2. 如果我确实添加了所有 polyfills.js、vendor.js 和 main.js，那么 shell 应用程序只会加载顶部的微型应用程序。shell app-root 和其他微应用未加载

这是因为构建过程有问题吗？ngx-build-plus 应该用 main.js 打包 vendor。如果是这样，为什么微应用在它的 main.js 中找不到它。微型应用程序是否需要一些设置才能从 main.js 中找到它的供应商和 polyfill

我正在尝试将微前端和微服务的概念应用到我当前的项目中。
对于前端开发，我使用https://quasar.dev/和后端https://www.scala-lang.org/。
我有以下情况：

我有 3 个微服务，每个都有自己的前端，在 NGINX 容器中运行。此外，每个微服务都有自己的后端，并且是用 Scala 编写的。

现在，我要实现的目标如下：

• 我输入 url example.io/app1，然后应该调用microservice1 。App Shell 的内容（带有蓝色边框的矩形）应该显示来自microservice1的 quasar 应用程序。

• 然后我将 url 更改为 example.io/app2。然后应该调用microservice2并且 App Shell 的内容（带有蓝色边框的矩形）应该显示来自microservice2的 quasar 应用程序。

App Shell 就像一个容器，另一个应用程序在其中运行。Martin Fowler 写了一篇关于微前端的精彩文章。

问题是，如何创建一个 App Shell 作为前端应用程序的主要布局？

我使用 Angular & React Js 和 Angular 中的基本/容器应用程序创建了两个微型应用程序。微型应用程序在不同的端口上运行，基础应用程序从特定端口导入 main.js 文件。我已经按照这篇文章实现了这个功能 - https://medium.com/javascript-in-plain-english/create-micro-frontends-using-web-components-with-support-for-angular-and-react -2d6db18f557a。在这里，他已将每个微应用程序的资产复制到基本应用程序中，但是有没有更好的方法可以让我在运行时独立地将资产加载到基本应用程序中，并访问基本应用程序服务器可以访问的权限。

（问朋友;-)）

我正在与 Web（react）和移动（IOS、Android）团队合作。而且我发现即使使用微服务架构，我们最终总是在前端/客户端级别做重复的工作。如何实现一个微前端架构，减少前端工作的重复，但仍然为本地客户端提供高质量的体验？

更多上下文：

我阅读了 Cam Jackson 的微前端文章并浏览了 Michael Geers 的微前端博客。我意识到我们更接近微服务模式：

比微前端：

这主要是由于康威定律。即使拥有拥有完整产品的专门团队，我们仍然有专门的团队仅用于 IOS 和 Android 原生工作。每个新的离散功能，即使在 API/服务级别具有明确的边界上下文，最终都会被分割成相同功能/组件的多个不同前端实现，主要是为了支持原生应用程序（这要求每个组件在本机应用程序必须是本机的）。这让我想到了实现微前端。在理想的世界中，不会有任何专门的原生应用程序团队，而 ios 和 android 开发人员会整合相应的产品团队（如上图所述）。但这不是一个选择。

鉴于我们的网络应用程序具有与移动应用程序相同的外观和感觉。创建单个 Web 组件作为微前端的一部分并在具有嵌入式 Web 视图的本机应用程序中使用它是一个好主意吗？那会被认为是微前端架构吗？这种方法有什么缺点？

这样，构建响应式 Web 组件的同一团队将负责端到端的功能。并且只留下核心用户旅程和原生特定功能（如 AR 和条形码扫描）作为原生组件运行。

我的要求是在动态路由上注册应用程序（我需要从服务器获取 UUID 并将其附加到每个 MFE 路由）。我的方法是首先注册一个 MFE，从服务器获取 UUID，然后在动态路由上注册其他 MFE。在同一个单水疗实例上调用 start() 方法后是否可以注册 MFE？如果不是，我可以在另一个单水疗实例上注册这些 MFE 吗？这会影响单水疗行为吗？

我正在使用 single-spa.js 库在同一系统中制作多个 Angular 应用程序。现在，我在每个应用程序的 app.module 中使用类似这样的代码的每个应用程序使用 httpInterceptor

拦截器按预期正常工作，但有多个拦截器会导致线程安全问题，并导致令牌在请求之间混淆（来自 1 个应用程序的拦截器使用本地存储中的令牌并向服务器发送请求，当拦截器来自在第一个应用程序的响应更新本地存储中的令牌之前，应用程序 2 使用了相同的令牌。）.. 导致来自 app2 请求的“无效令牌”服务器响应。

我的问题是，有没有办法在我的项目中跨多个应用程序使用一个 http 拦截器？

我目前正在致力于国际化一个使用单水疗（微前端）构建的系统，以及在 Angular 和 React 上编写的应用程序。我开始使用 i18next 并且进展顺利，但是，当我尝试在所有应用程序之间共享 i18next 依赖项时发现了一个问题。

当两个应用程序同时安装在视图上时，最后加载的应用程序会覆盖 i18next 实例，因此永远找不到第一个应用程序的翻译，因为它们没有加载到后者上。

提前致谢！

我努力了，

1. 单人SPA
2. 网页组件

但是在这两种方式中，我都找不到一种方法来单独开发和部署微前端，然后将那些部署的微前端引用到包装器网络应用程序中。
在我尝试使用上述方法的示例中，微前端在包装器 Web 应用程序中呈现，但是当独立服务时，它们没有按预期呈现。

微用户界面

发出输出事件的位置。

壳

如何使用输出事件。

谁能让我知道为什么这不适用于 Angular Shell？我之前已经成功地将 @Input from Shell 传递给了一个组件。

我已经尝试使用 Single SPA 实现微前端，但我还需要探索任何其他可以将 angular 和 react 结合并部署到单个应用程序中的替代方案。我探索了 mooa，我觉得它对 angular 和做出反应。谁能推荐任何更好的微前端框架？我的主要用例是将 Angular 和 react 结合到一个应用程序中，例如 Header 是 Angular 而 body 是 React 应用程序。?