问题标签 [single-spa]

我需要帮助才能从我的容器单水疗中心与加载的 Angular 应用程序（子项）进行通信。当用户单击父应用程序（ spa-container ）选项时，应与子应用程序通信以更改模式。

它不会经常发生。但无法找到从容器到加载的角度应用程序的通信方式。

spa本身给出了一个细节：spa-communication detail but not clear 也没有详细的步骤。有人帮我吗？

我从头开始了单水疗应用程序：

https://medium.com/@AndrewLocke/creating-a-single-spa-web-application-4e115802f474

我想使用角度，所以我创建了另一个应用程序

ng new my-app --routing --prefix my-app

并且应用程序运行良好，然后我添加了 single-spa-angular

ng add single-spa-angular

并且应用程序停止渲染，即使angular.version从开发工具中的控制台调用也会返回错误：未定义角度。

如何渲染此应用程序？或者有实时重新加载以进行开发？

我正在为我当前的项目使用单个水疗中心，并且希望有一个加载器，直到我的微应用程序被加载并且这些微应用程序之间会有一个切换，在这种情况下，我也想显示一个加载器。有没有办法达到同样的效果？

根据 single-spa 官方文档，我们可以使用 RxJs 共享应用程序的 UI 状态。

Observables / Subjects (RxJs) - 一个微前端向流中发出新值，任何其他微前端都可以使用这些值。它将可观察对象从其浏览器内模块导出到所有微前端，以便其他人可以导入它。

链接：https ://single-spa.js.org/docs/recommended-setup/#ui-state

链接：https ://single-spa.js.org/docs/faq/#how-can-i-share-application-state-between-applications

我试图在 React 中创建一个示例，其中我使用 single-spa 包裹将我的微应用程序包含在根应用程序中。我试图使用 RxJs 共享 UI 状态。当我用谷歌搜索单水疗 RxJs 时，我什么也没找到。谁能给我一个基本示例，我将能够为以下用例共享 UI 状态：

• 将 UI 状态从根应用程序共享到我的微应用程序。
• 将 UI 状态从微应用共享到根应用。
• 在微应用之间共享 UI 状态。

过去几天我一直在经历 single-spa，设置和集成 frmawork（Angular）应用程序或库（React/redux 应用程序）非常简单。

但我有一个疑问

考虑今天我有 10 个或更多 React 应用程序，几个月后我需要开发最新的 React 应用程序（例如：React-18），然后如何将该项目包含在这个现有的单水疗项目中，因为我们只有一个package.json 文件和一个 node_modules 文件夹，我们不能在 package.json 文件中有两个不同版本的相同包名。

而且我不想在现有的 React App 上工作。

1. 现有的应用程序应该在它构建的相同版本中运行，并且新的 React 版本的应用程序也应该运行。这在单水疗中可能吗？

2. 如果单个 SPA 有一个 package.json 文件，我还有一个疑问，考虑我有一个具有 react-16 和 angular9 应用程序的简单应用程序，出于某种原因，我想要一个库说 XYZ ，用于 React 和 Angular 项目，但是他们想要不同版本的 X.js

3. 有没有人有像这样的实施想法

我一直在四处寻找这个问题的答案，但我不能，如果已经问过这个问题，我很抱歉！

我创建了一些小的 angular 9 应用程序，我使用单个 spa 将它们导入到基本的 html 页面中。我的应用程序在本地的不同端口上运行，我的导入语句如下所示：

而且我的 html 页面中有路由，以便应用程序显示在不同的路由上，这是我正在导入的应用程序注册中的一项：

这一切都很好，我的简单应用程序应该会显示出来。当我尝试将一些子页面添加到我的简单应用程序中并路由到我的主“shell”应用程序中的子页面时，就会出现问题，如果我导航到“localhost:4200/header”，我导入的“header”应用程序会正确显示。如果我尝试在该应用程序中导航到子页面，例如我在“标题”应用程序“app-routing-module”中设置的这个子路由：

] },

什么都没发生。我的<router-outlet></router-outlet>“header”应用程序的登录页面上有一个类似这样的链接：<a [routerLink]="['./dets']">Dets</a>但不是在主应用程序中路由到“localhost:4200/header/dets”，而是到“localhost:4200/dets”的角度路由，这当然不会不存在。有人对我缺少什么有任何想法吗？任何帮助将不胜感激！

在我将我的角度从 8 升级到 9 之后，我实现了。当我通过运行得到以下错误single-spa的命令开始运行应用程序时。yarn serve:single-spa:ibo

无法理解问题。有人请帮帮我吗？这是我的angular.json文件：

我是反应新手..我有反应应用程序，我迁移到 Single-SPA。要将我的应用程序与主应用程序（具有许多 Vue 单水疗应用程序的平台）集成，我已将其重新构建为

MainApp - 它包括与进程相关的所有页面 - 在 localhost:3000 下运行

root-html-file - 它包括一个 index.html 和 package.json 文件 index.html（在 localhost:5000 下运行-由 SPA 生成）

代码：root-html-file -> index.html

myapp 应用程序可以独立运行。只有在运行将加载 myapp 应用程序的 root-html-file 应用程序 (npm run serve) 时才会导致 CROS 起源 问题。请在此处找到屏幕截图输入图像描述

如果我的方向错误，请指导我。

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

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

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

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