问题标签 [single-spa-angular]

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.

0 投票
1 回答
648 浏览

angular - 使用单 SPA 为子应用程序加载自定义字体的最佳方法是什么?

我们在子应用程序中使用了自定义字体真棒图标,目前它作为 Angular 组件加载到子应用程序中。将子应用程序作为单独的应用程序运行时,我们没有任何问题。在将应用程序转换为单个 PA 后,应用程序正在正确加载,但自定义字体未加载,因为它正在父应用程序路径下寻找子应用程序自定义字体文件(.ttf 或 .woff)文件。

我们注意到其他 Angular 组件(例如primeng.

使用单 SPA 为子应用程序加载自定义字体的最佳方法是什么?

0 投票
1 回答
1198 浏览

reactjs - 浏览器刷新显示“page not found”错误,当单spa应用程序部署在子目录中时

我的单水疗中心包含 4 个反应应用程序。每个都有自己的 react-router-dom。如果我从 4 个应用程序之一中刷新浏览器,它会显示找不到页面。应用程序部署在 Linux 操作系统的 apache 服务器中。

我不知道我是否缺少基本应用程序中的任何配置。它在 webpack 和 node 的开发服务器中运行良好。

0 投票
1 回答
136 浏览

reactjs - 将父应用程序(角度)中的 css 排除在单水疗应用程序中的子应用程序(反应)中

我制作了一个单水疗应用程序,其中我使用 angular 作为父项目并将反应包放入其中。现在问题来了,react 正在获取 angular 项目的 CSS。我已经在 react 项目的 webpack.config 文件中排除了特定的 CSS。但这不是我想要的方式。S 应该怎么做?

0 投票
1 回答
455 浏览

jquery - Font Awesome 和 JQuery 在单个 SPA Angular 应用程序中不起作用

我创建了一个单水疗角应用程序,在其中我使用“npm install --save bootstrap jquery@3.4.1 font-awesome”安装了 font-awesome 和 jquery 和 bootstrap。之后,我在 angular.json 文件中提供了这个 js 和 css 的 url,所以我面临的问题是 jquery 和 font-awesome 在我以正常角度模式运行此应用程序时工作正常,但是当我尝试运行时出现问题此应用程序在单水疗模式下。在单水疗模式下,jQuery 和 font-awesome 不起作用,但我无法理解我的引导样式正在工作,但为什么即使我在 angular.json 文件中提供了 font-awesome url,我也面临 font-awesome 的问题就像我为引导程序提供 url 一样。

注意:我通过在已经存在的角度应用程序的根文件夹中运行“ng add single-spa-angular”命令创建了这个单一的 spa 角度应用程序。

我们可以使用“ng serve -o”命令以正常角度模式运行应用程序。但是要在单水疗模式下运行这个应用程序,我们必须运行这个命令“npm run serve:single-spa:”。

谢谢

0 投票
1 回答
132 浏览

internet-explorer-11 - 我已经使用 create single-spa 创建了 single-spa 应用程序,它在除 IE11 之外的所有浏览器中都能正常工作

运行应用程序时出现 IE11 错误

注意:我添加了 core.js 依赖,在 IE 中仍然报错

0 投票
1 回答
379 浏览

angular - 单水疗根配置为角度项目

我正在尝试将我们的单片角度应用程序拆除到单水疗微前端。

我想将核心身份验证和授权模块保留在 root-config 中,以便我可以将用户信息传递给各个模块。

因此,我正在寻找任何现有或示例 GitHub 项目,我可以在其中参考 Angular 单一 spa 根配置

任何帮助,将不胜感激。

0 投票
1 回答
443 浏览

angular - 单水疗路由器:Angular 9

我想在页眉和页脚之间添加路由页面。不应为每个导航重新渲染页眉和页脚。

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

一旦我们导航到默认路由'localhost:4200/',它将呈现页眉、仪表板和页脚,但导航到帮助后,页脚将消失。Header 和 Route 应用程序将呈现。

0 投票
0 回答
122 浏览

reactjs - 如何从不同的独立 Angular 应用程序调用单个 spa 配置微前端应用程序(其中包含多个 MFE)

我有一个基于 Angular 9 的 Angular 独立应用程序

我有另一个不同的应用程序——一个使用 React 和 MFE 架构构建的新应用程序。我们正在使用单水疗框架。这个应用程序有:

  1. 多个微前端
  2. 所有 MFE 都在根配置应用程序中进行配置,该应用程序是所有子 MFE 的父应用程序

如何从独立的 Angular 应用程序(通过按钮或链接)调用父根配置应用程序?

0 投票
0 回答
115 浏览

android - Capacitor.isNative 在 Webview 中重新加载页面或重新启动应用程序时更改值

在我们为 Android 开发的电容器应用程序中,我们使用电容器.config.json 中的 server.url 从 url 加载整个应用程序。

我们的应用程序是一个单 spa 应用程序,它将 Angular 应用程序加载为多个微前端。我们使用以下命令构建我们的应用程序:

  1. npm run build(这会为 single-spa 构建根配置)
  2. npx 上限同步 android
  3. npx cap 打开 android
  4. 然后使用 Android Studio 构建 APK

然后我们尝试在我们的一个角度组件中执行以下代码。这样做是为了有条件地在组件中实现一些平台特定的逻辑。

在我们的例子中,在使用 chrome 调试器重新加载或再次关闭和打开应用程序后, Capacitor.isNative字段从true变为false 。我们是否需要做一些额外的事情来确保 Capacitor 将 App 识别为原生 App?任何人都知道为什么在我们重新加载页面后 Capacitor 对象会发生变化?

我们尝试使用其他 Capacitor API 来检测Capacitor.getPlatform()Capacitor.platform等平台。在重新打开应用程序或使用 chrome 调试器重新加载页面后,这两个都从“android”变为“web”。

我们在尝试加载其他 Capacitor 插件时也看到了类似的行为,其中插件对象在重新加载页面或重新启动应用程序后更改其结构(即,可能是加载 Web 实现而不是 Android 特定实现)。有没有人遇到过类似的问题?

0 投票
2 回答
4687 浏览

single-spa-angular - 找不到模块'@angular-builders/custom-webpack/package.json'

我正在关注有关角度的单水疗中心的文档。我的角度版本是 11+。我按照 https://single-spa.js.org/docs/ecosystem-angular/#angular-clihttps://single-spa.js.org/docs/ecosystem-angular/#finish-installation的步骤进行操作成功地。但是作为后续步骤,当我完成https://single-spa.js.org/docs/ecosystem-angular/#configure-routes并在https://single-spa.js.org/docs/ecosystem- 运行脚本时angular/#serving at npm run serve:single-spa (npm run serve:single-spa:my-app) 实际上,我收到以下错误: 找不到模块 @angular-builders/custom-webpack/.. 任何人都可以指出找出为什么会发生这种情况以及对此有什么补救措施?这是相关的日志文件在此处输入图像描述