问题标签 [single-spa-angular]

我目前正在尝试通过 Webpack 外部外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小型库实现了这一点，没有出现任何问题。

Can't resolve all parameters for ApplicationModule: (?) at at syntaxError (util.ts:100) at CompileMetadataResolver._getDependenciesMetadata (metadata_resolver.ts:957) ...如果我只是移动“@angular/compiler”，它也可以工作，但是当外部化“@angular/core”和其他人时，我在引导应用程序时收到错误。

我使用的文件是您可以在 unpkg.com 中找到的 8.2.14 UMD 捆绑包，我的外部文件是：

rxjs 包是在这里找到的包https://cdn.jsdelivr.net/npm/@esm-bundle。

您可以在此 repo 上看到错误：https ://github.com/OriolInvernonLlaneza/test-share-angular

提前致谢！

编辑：感谢 yurzui 的回答，这个错误得到了解决。但是，我现在收到另一个错误：

我正在尝试使用 Angular更新webpack_public_path 。我正在使用 single-spa 库，但在加载 font-awesome 字体时遇到问题。

它在我们服务器的根目录 ('/') 中寻找它们，但它们实际上驻留在应用程序文件夹 ('/app1') 中。

我创建了一个文件 set-public-path.ts 并将其导入到 main.single-spa.ts 中。

设置公共路径.ts

main.single-spa.ts

当应用程序运行时，它会记录正确的 URL，但 404 错误仍然表明它正在查找根目录。我不确定我做错了什么。我正在使用 SystemJS 在 index.html 文件中导入应用程序。

环境信息：

我需要帮助才能从我的容器单水疗中心与加载的 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文件：

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