问题标签 [single-spa]

我正在开发一个单水疗反应应用程序。我正在使用来自 single-spa 的 navigateToUrl 函数从应用程序 A 切换到应用程序 B。但是在切换到应用程序 B 后，应用程序 A 仍然安装在我的 DOM 中。我如何强行卸载它？

我在 single-spa 中有两个应用程序，一个在 React 中，另一个在 Vue 中。React 应用程序使用历史库进行导航。下面给出的是我的 React 应用程序文件：

历史.js

应用程序.js

我在以下情况下遇到问题：

1. 我在 React 应用程序的路径 https://localhost:3000/myapp/user 并切换到 Vue 应用程序（使用导航栏菜单）。
2. 现在，当我切换回 React 应用程序时，url 显示 https://localhost:3000/myapp 理想情况下应该加载我的 Home 组件。
3. 但是现在历史仍然有旧的位置（https://localhost:3000/myapp/user），然后加载旧的用户组件。

有没有办法在 url 更改时更新历史记录？

我正在使用 Single SPA frameowrk 使用 React 创建一个微前端。

当 rub build 没有错误。但是在运行测试或覆盖时会引发以下错误。

错误详情 ：

测试套件无法运行

经过一些分析我的发现：

1. 问题是由于传播运算符。（如果删除有效）
2. 扩展运算符在函数中使用时起作用，但在 React 组件中不起作用。

例如：失败：<MyReactComponent {...props} /> 工作正常：const a = { id:1 , ...props }

其他信息：

使用 Babel7，babel 配置如下

任何指导都会有所帮助。

我正在使用单水疗库来创建微前端。我正在尝试在微前端之一中实现延迟加载。正常路由工作正常，但是当我尝试在一个微前端中延迟加载模块时，它不会加载并给出错误。

https://github.com/single-spa/single-spa-angular/issues/116

我面临完全相同的问题并使用他尝试解决问题的方法，但我仍然遇到异常在此处输入图像描述

尝试在 Single-SPA 应用程序中启动子应用程序时遇到错误。基本上，我正在尝试开发一种包含 Sockjs、Stomp-client 等的 util 应用程序（Single-SPA 中的子应用程序）。我已经删除了节点模块和 package-lock.json 并再次安装了节点模块。当我尝试启动应用程序时，我面临以下错误。

用于运行应用程序的命令：npm start

包.json

回购示例：https ://github.com/OriolInvernonLlaneza/karma-webpack-error-example

我使用 Angular 11 和 Webpack 4 正确运行了 Karma + Jasmine 测试。但是，当尝试将 Angular 和 Webpack 更新到 v12 和 v5 时，我在启动测试时遇到了以下错误：

这是我的因果报应：

还有我的 Webpack 配置：

我还尝试了以前的自定义规则并得到了同样的错误。

先感谢您！

编辑：

这是 package.json：

.babelrc：

更新：我将测试框架更改为 Jest，因为我找不到解决方法。

activeWhen 正在监听 url

我们有 ABC 应用程序，我们的 url 结构必须是主机名/A/B/C 如果我只想显示 C 微应用程序，activeWhen("hostname/A/B/C") 但来自 A 和 B 的所有父应用程序都会也出现..
无论如何是解决方法（不改变url结构）。
以及为什么它会加载所有父应用程序。不是 active 什么时候需要匹配而不是部分匹配？

另一个问题，如何像 single-spa-inspector 一样强制加载应用程序

谢谢你调查它

我有一个 spa 应用程序，我在其中使用 3 个子应用程序（每个都是微前端）。对于 1 个子应用程序，我正在安装到根 html 并设置为始终处于活动状态。对于其余 2，根据路线，将自己挂载/卸载到根 html 上。对于始终处于活动状态的孩子，我将当前路径作为道具从根传递，以便基于该路径，该孩子中的组件应该呈现（条件渲染）。我面临的问题是，孩子能够从根目录接收道具，但是当路径发生变化时，新路径不会反映到孩子身上，我必须手动重新加载页面才能有条件地在其中渲染这些组件那个儿童应用程序。所以，这里是 root-config.js 文件和 child.js 文件。

目标是 app3 中的 LeftPane 组件不应该只为 path="/" 呈现，而 NavBody 应该只为 path="/" 呈现。我怎样才能做到这一点？

我基本上是在使用 single-spa 的不同框架中构建不同的应用程序，并使用 rxjs 将 auth 用于共享状态。

这是我在 Vue js 中的代码。我基本上是在导入 auth BehaviorSubject/Observables (exjs) 并订阅它。rxjs 在另一个应用程序中单独运行。目前，未找到模块'@org/auth'的给出和错误。同样的方法适用于 react project 。

我需要有 webpack 才能导入吗？

需要帮忙

问题：

如何（是否有可能）配置 webpack （带有单水疗中心） ，在一个范围（@orginazation）外部和其他内部（非外部）下制作一些包（项目） ？

项目信息：

我们正在使用webpack构建一个单一的 spa应用程序，并使用Github npm registrer （和 github 操作）。所有的微前端都是 Github 中的项目，其中一些是 util/helper/provider 项目，使用 webpack 编译为外部项目。

但其中一些是用微前端编译的（不能是外部的）

似乎当 webpack 将组织范围内的一个项目视为外部项目时，它将该范围内的所有包都设置为外部！

正如我们从日志中看到的，“CompilingTool”也将被编译为外部，事件认为它不应该。

包在文件中设置为：

可以将单水疗配置中的外部更改为其他内容，例如：

但这意味着智能不再起作用，因为它现在没有指向微前端中的实际包（仍然是“@ORGANIZATION/compilingTool”）

必须开始使用像 gulp 这样的预构建工具来进行这样的转换并不是最优的。而且我们不喜欢使用不同的 Github 帐户来拥有不同的范围。

因此，任何让 webpack 理解它不应该将“@ORGANIZATION/compilingTool”包外部化的帮助或想法都是非常重要的。

已经尝试过：

从外部的 webpack 文档中，应该可以使用验证函数和/或减法，但两者都不适用于带有 spa-setup 的作用域包。

编译/依赖信息：

single-spa/webpack 编译为SystemJs

Webpack 和 single-spa 包：

• “单水疗”：“^5.9.3”
• “单水疗中心布局”：“1.6.0”
• “webpack”：“^5.48.0”
• “webpack-cli”：“^4.7.2”
• “webpack-config-single-spa-ts”：“^3.0.0”
• “webpack-dev-server”：“4.0.0-rc.0”
• “webpack 合并”：“^5.8.0”

webpack.config.js （项目特定已替换为虚拟代码！）

来自 webpack 构建的运行时控制台输出：（ 项目特定已替换为虚拟代码！）