问题标签 [single-spa]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

145 问题
Newest
Active
Bountied
318
Unanswered
0 投票
0 回答
118 浏览

javascript - Single Spa：在路由前检查用户权限

我正在开发一个单水疗应用程序，它基本上具有到另一个 MFE（微前端）的路由映射。

我确实可以访问某些 MFE 的源，但在路由之前我没有拥有一个 MFE（比如说“A”），我应该检查用户权限。

因此，任务是：如果用户具有必要的权限，则将他路由到 MFE“A”，否则将他路由到“访问被拒绝页面”。

我试图在互联网上找到一些解决方案，大多数答案都建议在 MFE “A”（这对我来说是强加的）上执行权限检查。

我发现有一个事件叫做“single-spa:before-routing-event”。

我正在考虑以下解决方案：

如果有人可以查看解决方案并让我知道它是一个好的解决方案还是有其他方法会非常有帮助吗？

先感谢您！

0 投票
0 回答
81 浏览

vue.js - 单水疗微应用 beforeRouteLeave 在 vue 应用程序中不起作用

我正在开发一个单水疗应用程序，下面是我的应用程序文件夹结构，

主应用

  • 根
  • 应用程序1
  • 应用程序2

App1 和 App2 是一个 vue 应用程序，在 App2 iam 的一个组件中具有此代码，

但是这个 beforeRouteLeave 甚至没有被触发。

注意：beforeRouteEnter 正在工作，而 beforeDestroy,destroy 也正在工作。

0 投票
0 回答
73 浏览

reactjs - 使用@testing-library/react 在单spa React 应用程序中进行单元测试

我正在开发一个使用 React 的单水疗应用程序。由于 React 是一个常见的依赖项，我只在 systemjs-importmap 的根应用程序中添加了它

现在，当我为其他应用程序中的组件编写单独的测试用例时，我收到一个错误，即未定义“反应”

● 测试套件无法运行从“测试/组件/common/AccountInfo.test.js”中找不到模块“反应”

如果不向每个单独的应用程序的 package.json 添加“react”依赖项，我是否需要做任何配置才能使 React 包也可以在我的测试文件中使用？

0 投票
0 回答
700 浏览

javascript - 从 Webpack 生成的微前端中找不到 React

在现有的基于 Angular 的容器应用程序中，具有多个 Angular 微前端，我想加载另一个基于 React 和Atlasmap的应用程序。但是，我不断收到以下异常：

这表明未加载 React。到目前为止我已经尝试过：

  • 将 React 添加到导入映射
  • 使用导入映射开发工具覆盖模块导入
  • 尝试在 webpack 生成的包中包含 React
  • 纱线代替 npm
  • 将 React 直接添加到<head>容器应用程序的
  • 与 Pika 的“ESM”构建的 React相同

一切似乎都不起作用，所以它可能归结为不正确的 Webpack 配置。配置变得相当大，所以我会在下面发布它，它基于几篇博文和 patternfly/react Webpack 配置推荐

正在使用的版本：“single-spa-react”：“^4.0.0”、“ts-config-single-spa”：“^2.0.0”、“typescript”：“^4.1.2”、“webpack” ：“^5.8.0”、“webpack-cli”：“^4.2.0”、“webpack-config-single-spa-react”：“^2.0.0”、“webpack-config-single-spa-react” -ts”：“^2.0.0”、“webpack-config-single-spa-ts”：“^2.0.0”、“react”：“^16.13.1”、“react-dom”：“^16.13. 1" "@atlasmap/atlasmap": "^2.2.2",

这是一个复杂的问题，有很多活动部件，但如果没有任何解决方案，我已经很感激可以尝试的指针。

如果您需要更多信息，请告诉我。

/编辑更多信息

tsconfig.json：

SphereMall-data-mapping-mf.tsx（为单个水疗中心创建生命周期）

App.tsx（复制并改编自https://github.com/atlasmap/atlasmap/blob/master/ui/packages/atlasmap-standalone/src/App.tsx和https://github.com/atlasmap/atlasmap/ blob/master/ui/packages/atlasmap-standalone/src/index.tsx）

0 投票
1 回答
71 浏览

reactjs - 在单个 spa microfrond end root-config 中添加反应组件

如何在根应用程序（例如链接：链接）中添加反应并添加组件？我试图导入 react 和 react-dom 并添加组件，但它不工作并且应用程序被关闭。

0 投票
0 回答
78 浏览

reactjs - Shadow Dom 将整个 react 应用程序与 css 一起定义

有没有办法使用 shadow dom 来确定整个 React 应用程序及其 css 样式的范围？

我想要整个应用程序，因为它可以正常运行，但在使用单个 spa 导入另一个页面时，全局页面的 css 不会与 microApp 的 css 冲突。

0 投票
0 回答
249 浏览

webpack-5 - 无法使用 Single-SPA Angular 11 应用程序配置 webpack 5

我们已经使用带有 Angular 9 的单 SPA 框架创建了一个微前端。我们需要在这些微前端之间共享一些公共代码，因此我们决定为此使用模块联合。要使用模块联合，我们需要使用 Angular 11 支持的 webpack 5 作为可选功能。所以我们将应用程序更新到 Angular 11。我们按照以下文章设置 webpack 5 -使用 webpack 5 的模块联合。现在，当我们运行并尝试在浏览器中加载这个微前端时，我们收到以下错误 -single-spa minified message #37: See https://single-spa.js.org/error/?code=37&arg=application&arg={application-name}&arg={"default":{},"__useDefault":true}

提前致谢

0 投票
2 回答
1092 浏览

angular - 将 Angular 11 应用程序升级到 Angular 12 时面临的问题

当我们尝试将 Angular 11 应用程序（单 SPA 微前端）更新到 Angular 12 时，我们面临以下问题。

尝试运行此应用程序时控制台出错：

  • configuration.output 具有未知属性“chunkLoadingGlobal”。这些属性有效：object { assistantComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, devtoolNamespace?, filename?, futureEmitAssetss?, globalObject?, hashDigest?, hashDigestLength?, hashFunction ?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassembly模块文件名？}-> 影响编译输出的选项。outputoptions 告诉 webpack 如何将编译后的文件写入磁盘。有关详细信息，请参阅“C:\Users\newUser\AppData\Local\Temp\ng-UOeNLu\angular-errors.log”。

包.json：

角.json：

0 投票
1 回答
439 浏览

reactjs - 如何在带有单个 MFE 的微前端架构中实现 react-redux？

可能是重复的问题，即使我的业务案例有点不同，因为我需要专家的帮助。

第一次，我在单个 spa 框架的帮助下在当前项目中使用微前端架构

与反应。我有使用 redux(thunk,saga) 的 reactjs 经验，但在单个 spa 中，我无法拦截存储在单个 MFE根组件中的提供程序。

任何人都使用过带有单个 SPA 框架的 reactjs 以及带有单个 MFE 的 redux。

我所有的 MFE 都只在 reactjs 中。

#reactjs #redux #redux-saga。

0 投票
0 回答
39 浏览

reactjs - 部署在服务器上时路由不起作用

以上是我用来路由单水疗中心的代码，如果我在本地执行 localhost:9000/worklist，它将带我到工作列表选项卡，但是如果我使用“/worklist”路由它，当部署在服务器上时会抛出一个错误，说“无法获取 /worklist”。同样来自 UI，当我手动单击选项卡时，它会向我显示“/worklist”作为正确的路线，并将我带到正确的选项卡。问题是当我使用 /worklist 输入 URL 时，它并没有把我带到那里。我该如何克服呢？


12345678910