问题标签 [webpack-module-federation]

我有两个项目，我们将项目 A 和项目 B 命名为webpack 模块联合，每个项目在他们的应用程序之间都有自己的集成。我还有第三个项目 C，它带有webpack 模块联合，有自己的应用程序集成。

每个项目都有自己的存储库，每个服务中的每个团队都是专门的。

该建议是如何将这两个项目集成到第三个项目中，而不会在应用程序之间而是在每个项目中出现冲突。

这笔交易试图让项目 C 成为项目 A 和 B 的父亲。A 和 B 是 C 的孩子，但仍然独立于 C 工作。

我是否需要继续使用模块联合进行此集成？或者我是否需要另一个架构/想法来实现这个实现？

问题

我们正在使用 Angular 12 和 Webpack 模块联合创建一组新的应用程序。我们一直在遵循很多指南，并且大部分都在工作。我们现在需要我们的主机/外壳应用程序从一些子应用程序中查询信息，主要是在主机/外壳程序初始化时，我们无法弄清楚如何实现这一点。注意：所有涉及的应用程序，包括外壳程序和所有子程序，都将是 Angular 12+。我们没有混合不同的框架。

出于关注点分离的原因，我们希望 shell 应用程序查询一些子项，以便子项可以确定当前用户可以访问其应用程序的哪些链接/部分，然后将其传达回 shell。这是为了我们的导航——shell 直到运行时才知道有哪些子应用程序存在。

我们的想法是，当 shell 启动时，shell 以某种方式调用的子节点数量有限。具体如何工作并不重要，我们可以让每个孩子将此启动代码放在一个仅用于此目的的特殊模块中，然后我们以某种方式在运行时从 shell 调用该模块。我们已经有跨应用程序通信工作，所以我们不需要从孩子显式地与 shell 通信，我们只需要触发此代码以按需运行。

tl;dr：我们的 shell 应用程序如何在特定的子应用程序中按需触发一些仅在运行时才知道的初始化行为？除了实际触发子应用程序启动而不直接路由到它们之外，我们已经为此工作了一切。不需要通信，我们已经有一个有效的消息传递实现，我们只需要首先触发代码运行。

我们尝试过的事情

我们尝试了两种解决方案。第一个是根据 Manfred Steyer 的这篇文章建模的，基本上是动态加载导致ngOnInit()被调用的远程组件。二是动态创建<router-outlet>s。这两个都有问题（许多与inject()在注入上下文之外调用相关的错误等等）。我们可以继续解决这些问题，但我觉得已经有解决方案了，所以我想我会问。

我正在Webpack 5 模块联合的世界中寻找自己的方式。有很多好的材料和例子，比如this和this。

但是，我发现的所有示例都构建在单个 Git 存储库中，通常使用npm 工作区和/或嵌套的 package.json 文件。

因为我要在多个 Git 存储库之间实现模块联合，所以我希望看到一个可以做到这一点的示例。有没有人发现这样的例子？

我假设这项工作是在遥控器的定义中完成的；我见过一些通过 URL 定义远程的情况，但在我的情况下，所有远程都将在构建时知道，所以我猜 URL 是矫枉过正的。我对吗？

我有 10 多个在各种 Angular 版本上运行的应用程序，并且我有一个 shell 应用程序，它使用自定义运行时和构建过程将它们绑定在一起。现在，对于 Webpack 5，我正在尝试使用 Module Federation。但是，我不想立即升级 Angular 8 上的一些应用程序。如果我尝试在 Angular 8 之上强制使用 Webpack 5，我会发现 Webpack 5 不推荐使用 8 的 devkit 方法。

有什么方法我们仍然可以将 Webpack 5 与旧版本的 Angular 一起使用？

在我的配置中，我目前正在使用一个 shell 应用程序和一个遥控器，两者都是用 angular 12.2.0 编写的，我遇到了一个我不知道如何解决的问题。

外壳 webpack.config.js

远程 webpack.config.js

当我在 shell 应用程序中使用对远程模块的引用时，一切正常，如下所示：

当远程模块的组件在其代码中实例化一个新的 Web Worker 时，就会出现问题，如下所示：

上面的代码，在 Webpack 5 中，已经在我的应用程序中生成了一个名为 my-worker.js 的单独包，它既不是组件的一部分，也不是模块的包。因此，将模块暴露给模块联合，也不会暴露到 remoteEntry.js 以及工作人员的代码。然后尝试使用 shell 应用程序导航到加载我的遥控器的路线，将出错并通知：

错误错误：未捕获（承诺）：SecurityError：无法构造“Worker”：无法从源“http://localhost:5000”访问“http://localhost:4250/my-worker.js”处的脚本。错误：无法构造“Worker”：无法从源“http://localhost:5000”访问“http://localhost:4250/my-worker.js”处的脚本。

所以问题是，如果我想要一个遥控器并公开它的模块以在 shell 应用程序中使用，并且它的一个模块使用 Web Worker，我如何确保由 Webpack 创建的单独的工作包也被公开为了让shell应用程序能够实例化它？

我已经使用模块联合将一个应用程序迁移到 MFE 架构，并且在运行时抛出了看起来很神秘的错误：

You provided an invalid object where a stream was expected error. You can provide an Observable, Promise, Array, or Iterable.

导致它的代码如下所示：

但是我很确定代码没问题...

在分析堆栈跟踪时，错误源自：

https://github.com/ReactiveX/rxjs/blob/6.6.7/src/internal/util/subscribeTo.ts

在我的情况下，result是类型BehaviorSubject。

但是，当我比较应用程序在非联合和联合中运行时的堆栈跟踪时，问题就在这里：

https://github.com/ReactiveX/rxjs/blob/6.6.7/src/internal/innerSubscribe.ts#L110

没有模块联合，这if是真的，当我查看原型时，我可以更深入地找到Observable.

然而在联邦环境中，这个表达式是错误的。

重构为：

不再抛出错误。

您对如何正确修复它有任何想法吗？

当前行为

我添加了一个带有--buildable标志的库，然后与文件中使用sharedMappings的两个应用程序共享它webpack.config.js。然后我添加了一个在上述应用程序中使用的服务。

应用程序dashboard在创建的服务中设置一个变量，然后单击Login按钮后，login应用程序记录变量的值。

服务应用程序工作正常。不幸的是，使用以下命令构建应用程序失败（请参阅失败日志）： nx run-many --target=build --all

预期行为

它构建得很好。奇怪的是，在没有--buildable标志的情况下这样做，它确实工作正常。

重现步骤

我分叉了以下回购：https ://github.com/Coly010/ng-mfe-example并做了当前行为中描述的事情：https ://github.com/TomONeill/ng-mfe-example/commit/ f62aeb9702ee7fa97dd85948991253a8ba1c713c

失败日志

编辑：nx 团队将解决此问题： https ://github.com/nrwl/nx/issues/6923#issuecomment-933608882

使用 Webpack 联合模块。是否可以混合使用具有不同框架的应用程序/模块。例如，一个应用程序使用 React 而另一个使用 Vue？

如果是这样，建议使用什么。或者建议不要使用什么混合物？反应，Vue，角度..

我将 Angular 与Webpack 5 Module Federation一起用于微前端。我有 2 个应用程序（我们称它们为 app1 和 app2），而我的主应用程序 app1 正在联合 app2 的组件。

在 app2 中，我的暴露组件由我的主模块导出，因此当我尝试联合某个组件时，我可以从模块的导出部分获取它。在开发模式下一切正常，我可以获得暴露的模块，检索导出的组件，然后使用组件工厂解析器在 app1 中我想要的位置创建它。

但是当我在生产环境中构建时（我使用 ng serve --prod 来重现 prod 环境并对其进行测试），我导出的组件消失了，但导入和提供程序却没有。这是我得到的模块：

如您所见，在 ɵmod 中，我没有导出的组件和声明，我希望在这里看到我的组件。我猜这是由于AOT 编译和优化，因为它在开发模式下工作。AOT 是否故意删除 ɵmod 中的所有内容？

使用 ReactuseContext钩子时，它目前需要从树中更高的组件导入以传入Context对象。比如说：

但是如果子组件是联合的，它将单独在一个单独的仓库中，并且不能从'./index'.

在这个MyApp级别，我可以导入ChildComponent：

const ChildComponent= React.lazy(() => import('federatedApp/ChildComponent'))

前提是在 Webpack 配置中，federatedApp被命名为远程，并且 HTML 文档包含远程模块入口点 .js。但是我怎么给MyContext遥控器federatedApp呢？

猜猜答案：我是否需要将两个组件index.jsx分成两个文件并分别公开它们？