标签: single-spa-angular

我正在关注有关 Angular 的 single-spa 的文档。我的 Angular 版本是 11+。我按照https://single-spa.js.org/docs/ecosystem-angular/#angular-cli到https://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 项目迁移到 single-spa，并且遇到了这个问题。

在子项目（微前端、Angular 12）中，请求的资产styles.scss只会从根/主机 url 中请求，而组件的 scss 文件中请求的资产将正确地在微前端的 url 中查找它们。我尝试使用,--deploy-url的选项提供了正确的基本网址。当以“single-spa 模式”启动时，子项目由构建器提供服务。和属性不起作用，并且会在构建/服务时抛出错误，因为它已在以前的 Angular 版本中被删除。ng serveAPP_BASE_HREF@angular-builders/custom-webpack:dev-server"baseHref""deployUrl"angular.json>architect.build.options"rebaseRootRelativeCssUrls"

根据资产调用位置生成的网络请求的示例图像

文件中的路径是相对的.scss，如下所示：

styles.scss
.sample {
  background-image: url('./assets/img/SAMPLE.png');
}

app.component.scss
.sample-two {
  background-image: url('../assets/img/SAMPLE.png');
}

将资产复制到根项目并使用绝对 URL 不是一种选择。由于子项目需要独立并能够由开发人员独立加载，因此它们应该保留自己的资产，并且如果存在替代方案，则不应将它们复制到两个项目。

我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小库实现了这一目标。

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

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

[
    /^@example\, 
    /^rxjs$/, 
    /^rxjs\/operators$/, 
    /^@angular\/core$/, 
    /^@angular\/compiler$/, 
    /^@angular\/common$/, 
    /^@angular\/common\/http$/, 
    /^@angular\/forms$/, 
    /^@angular\/platform-browser$/, 
    /^@angular\/platform-browser-dynamic$/, 
    /^@angular\/router$/, 
    /^zone\.js$/,
    /^single-spa$/
]

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

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

提前致谢！

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

Class constructor I cannot be invoked without 'new'
    at new EventEmitter (event_emitter.ts:78)
    at new NgZone (ng_zone.ts:97) …

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

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

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

链接：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 状态。当我在 google 上搜索 single-spa RxJs 时，我什么也没找到。谁能为我提供一个基本示例，我将能够为以下用例共享 UI 状态：

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