问题标签 [single-spa-angular]

我正在使用具有 3 个 Angular 应用程序但在其上的 URL 重定向无限循环的单水疗角创建微前端

我已经使用单个水疗中心设置了一个环境，但我遇到了奇怪的行为。我设置了三个有角度的应用程序：一个导航​​栏应用程序，它有两个页面，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：

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

我设法创建了一个有效的单水疗应用程序（带有导航栏和其他 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 文件：

我正在使用单水疗角框架的微前端方法工作。我有一个根容器应用程序，它在 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 和应用程序结构：

我正在使用单个 spa 创建微前端角度应用程序。如何从 assets 文件夹加载 i18n 文件。

我已按照以下说明进行操作： https ://single-spa.js.org/docs/ecosystem-angular/

角版本：9.1.12

单人水疗中心：4

单水疗角度：4.4.2

我们是否需要在 webpack 中添加一些额外的配置，以便它从 assets 文件夹中加载 i18n 文件？

我正在使用此命令生成 angular 10 项目：

但是我注意到在生成 angular 10 项目后，app.component.ts 没有被使用。

console.log 命令永远不会被执行。这怎么可能发生？如果我使用 ng new 命令，这肯定会被执行。如果这是预期的，请告知。然后如何在单个水疗中心使用 angular 10？谢谢

这是默认组件：

添加到 entryComponents 是没用的，我想如果有人使用 npx create-single-spa 命令生成 ng 项目可以立即看到这个问题。

不知道这里有什么问题

似乎使用 npx create-single-spa 创建的 angular 项目只能在 single-spa 中加载，不能单独加载

我想知道我们是否可以在不使用 single-spa 的情况下单独启动和调试创建的 angular 项目，然后一旦完成，部署并让 single-spa 使用它

主应用虚拟目录未加载，IE 报单应用错误。在其他浏览器中一切正常。可能有人遇到过同样的问题。 关于错误