问题标签 [single-spa]

我已经使用单个水疗中心设置了一个环境，但我遇到了奇怪的行为。我设置了三个有角度的应用程序：一个导航​​栏应用程序，它有两个页面，app1 和 app2，在导航栏下显示几个页面。我使用这个存储库作为模型：https ://github.com/joeldenning/coexisting-angular-microfrontends 。我了解存储库三天前已更改，我使用以前的提交作为模型。

行为：localhost:port/ - 显示导航栏 - 正确

localhost:port/navbarPage - 显示导航栏和导航栏页面 - 正确

localhost:port/app1Page - 仅显示导航栏几秒钟，然后切换到仅显示 app1Page 或反之亦然 - 错误

真正奇怪的是，两个单独的 spa 模板 div 都显示了，并且 app1Page 位于导航栏 div 内，而 app1 div 包含一个空的 app-root 元素。（见下文）

错误示例...

我注意到您更新了 index html 以使用 single-spa-layout，但我仍在使用旧版本仅供参考。这是我的 index.html：

任何帮助将不胜感激！谢谢！

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

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

提前致谢！

我努力了，

1. 单人SPA
2. 网页组件

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

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

我设法创建了一个有效的单水疗应用程序（带有导航栏和其他 3 个应用程序），从https://github.com/joeldenning/coexisting-angular-microfrontends复制和修改。

现在，我知道单个 SPA 应用程序实例的最终输出必须采用 single-spa 接受的格式。但是，我想知道是否以及如何让单个微前端在本地运行以用于开发目的。

假设我想独立开发导航栏微 ui，只在浏览器中使用导航栏。

当我开始npm run start（运行ng start）时，我只得到main.js服务。并且 Angular 不会引导。

我需要改变什么？

问候

实际上，我们有三个 Angular 项目，并且我们集成了概念单水疗中心（https://single-spa.js.org/docs/ecosystem-angular/），但我们在运行应用程序时遇到了问题，它没有考虑 angular.json(node_modules)我们也不能在单水疗配置文件中直接调用。

所以任何人都可以帮助我将 node_modules 包含在 single-spa webpack 中。

这里是 main.single-spa.js 的代码

Webpack 配置 js 文件：

提前致谢。

angular.json 文件：

我们如何加密从单个 SPA 传递给应用程序的身份验证令牌

我正在使用单水疗角框架的微前端方法工作。我有一个根容器应用程序，它在 4200 端口和 2 个微应用程序说 app1 @5201 和 app2 @ 4201 端口运行。我没有遇到 app2 的任何问题，它按照微前端方法完美运行。

在 app1 中，我有一个登录组件和仪表板组件。所以当我点击app1时，它首先点击登录组件（所需的流程：它必须检查用户配置文件并进行身份验证，并根据结果导航到仪表板组件）。为了在 app1 中检查此用户配置文件，我正在使用应用程序服务器（运行 @8443 端口）运行后端服务，并且代理在代理 config.json 中配置如下：{“/app1/*”：{“目标”：“http ://localhost:8443/", "secure": false } } 并且在 app1 中的 npm start 期间，它会从包 .json 中获取此语句（--proxy-config proxy.conf.json），这就是我们配置代理的方式用于 app1 中的后端服务。

现在，来到微前端，当我从根容器点击 app1 时，我得到一个拒绝访问的图像而不是仪表板。在内部，它点击了 app1 的登录组件，当我看到网络选项卡时，它点击了状态为 200k 的用户配置文件方法，但响应是整个 html（无论我在根容器的 index.html 中给出了什么）和访问被拒绝的图像被调用和渲染。它没有击中后端服务器本身。

但是当我点击 http://localhost:5201/app1/app1/app1-user-profile 时，我可以在浏览器中看到所需的响应。所以当我从其他应用程序路由时，是什么阻止我获取 app1 的仪表板/4200 端口？

谁能在这方面指导我？我是否还需要在根容器和其他微应用中配置代理设置？single-spa 可以帮助我进行此代理配置吗？

我下载了Angular Single SPA 的启动项目，我想在所有不同的应用程序（app1、app2、导航栏）中安装和使用 Angular Material。我认为，由于应用程序是独立的，因此足以按照此处的说明在每个应用程序中正常安装软件包。但是，以这种方式加载组件并且我可以使用它们但资产似乎没有。例如，如果我尝试显示一个图标

我只看到这个：

我在这里想念什么？extra-webpack.config.js我应该在文件中添加一些东西吗？

编辑。

以下是app.module.ts导航栏项目：

这是我的导航栏项目的 package.json：

我开发了一个微前端 UI 应用程序，该应用程序通过npm start命令在本地运行，但现在我想部署它，因为我需要使用 build 命令发布它，当我尝试运行时npm build --prod，npm build它不会抛出任何错误，但我没有看到在我的应用程序根文件夹中创建任何 dist 文件夹。下面是我的 package.json 和应用程序结构：