问题标签 [webpack-module-federation]

我正在尝试将 Webpack-5 模块联合实现到现有的大型现实世界应用程序。我正在尝试演示像angular-plugin-architecture-with-module-federation这样的插件。我将 SharedService 添加到共享库中，以模拟上面链接的示例应用程序中的应用程序和插件之间的通信。只有 1 个实例，并且在示例中一切正常，没有问题。

但是，在我现有的应用程序中，这不起作用，因为有 2 个服务实例。第一个实例在应用程序中创建，第二个实例在插件加载到其中时创建。我通过在构造函数的控制台中写入来验证这一点，并且有 2 行。此外，这可以通过在源代码中添加断点来看到。加载插件后，broser 的 Developer tools->Sources 中有两个 shared.service.ts 的源文件：

该应用程序使用上面屏幕截图中的第一个源文件。该插件使用 dist 中的文件。如何配置以使两者都使用相同的库实例并因此使用相同的服务？以下是更多信息：

项目/插件/webpack.config.js

src/webpack.config.js

工作区看起来像示例工作区中的一个：

除了由于另一个问题我不得不将 package.json 复制到项目/插件之外。我完全坚持这一点，并一直在尝试一切让它工作但没有成功。

有没有办法在不弹出的情况下使用 create-react-app 来使用模块联合？我想将我现有的反应应用程序（使用 CRA 创建）转换为微前端。

我见过很多 webpack5 模块联合案例，但似乎与“运行时负载”不匹配。

基本逻辑是：项目 A 暴露了几个组件。项目 B 通过在 webpack 配置文件中添加“remotes”来使用它们。

我认为这件事发生在 webpack 编译阶段，而不是在浏览器运行时。因为你必须修改你的 webpack 配置文件。

我希望实现一个运行时插件系统，通过在配置网页中单击“启用plugin1”，下次在运行时加载“plugin1.js”。

我认为模块联合真的很强大，它可以在运行时使用吗？有什么想法或样本可以实现这一目标吗？

谢谢。

我正在使用 webpack5 和 CLI11 开发模块联合原型，主要如下所述：https ://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/ .

基本上，我有一个主机应用程序，它从页面 b 加载一个共享模块。然后应该在主机中使用该共享模块。它设置了一个RouterModule.forChild()并公开通过 webpack 共享。到目前为止，这是有效的。

现在我添加了一个组件，它在内部使用动画并且事情正在破坏。在我的共享模块中导入 BrowserAnimationsModule 或任何平台相关模块（如 BrowserModule 或 NoopAnimationsModule 本身）后，主机应用程序将不再工作。每次我导航到路由器时，路由器都会在另一个下方添加我共享内容的新副本。我假设它每次加载模块时都会创建一个新平台，但我该如何防止呢？

我还尝试在应用程序和主机之间共享@angular/platform-b​​rowser/animations，但没有运气。

我知道 webpack 5 不是当前 CLI 的官方部分，但我想知道是否有人已经偶然发现了这一点。我认为作为用例并不少见。

我已经建立了一个存储库来重现这里的问题：https ://github.com/paad/module-federation

这是否已经是一个已知问题？也许有人有建议？

我正在使用以下包使用 webpack5 和 Angular 11 开发模块联合原型。

https://www.npmjs.com/package/@angular-architects/module-federation

在使用样式时，此包存在一个已知问题。

styleUrls 的错误目前，不幸的是，在实验性 CLI/webpack5 集成中存在一个错误，在将共享库与指向 styleUrls 的组件一起使用时会导致问题。目前，您可以通过删除应用程序和库中的所有 styleUrls 来解决此问题。

因此，解决方案是将所有 css 放在带有标签的 HTML 中。

就我而言，我有使用 SCSS 的现有项目。如果我想使用这个给定的包来使用微前端，我必须将我所有的 SCSS 迁移到 CSS 中并将其放入 HTML 文件中，这是一项非常艰巨的任务。

问题：有没有更好的方法来处理具有使用包@angular-architects/module-federation 的微前端的项目的SCSS？

我希望使用模块联合在我的主机应用程序中使用来自远程应用程序的组件。是否可以动态更改 webpack.config 文件中的远程 url 以包含可以在运行时更改的 slug？

Webpack 配置文件

从上面的示例中，我想更改远程 url 以从 localhost:8083/[slug]/remoteEntry.js 中提取组件

不确定模块联合是否支持包括基于 url 中的 slug 创建的组件？

任何帮助表示赞赏！

我正在尝试使用 Angular 和 Webpack Module Federation 为微前端构建 POC。在此，我创建了一个 shell 应用程序和另一个 mfe1 应用程序，并在特定路由命中渲染该 mfe1，它按预期工作并渲染该应用程序。现在，我正在尝试创建另一个名为 mfe2 的应用程序并进行渲染。在这个 mfe2 中，我正在使用 Angular 元素创建一个 Web 组件并在 shell 应用程序中呈现它。当我这样做时，我面临以下问题

错误：已创建具有不同配置的平台。请先销毁它。

当下面的代码正在执行时

我不明白确切的问题在哪里。我在下面添加所需的代码。

MFE2：

app.module.ts

webpack.config.js

贝壳：

在组件中渲染它：

webpack.config.js

请帮我解决这个问题。

谢谢...

我有两个 Angular 应用程序，一个外壳应用程序和一个 MonoRepo 内的内容应用程序。shell 应用程序就像一个显示卡片的登录页面，点击它，内容应用程序就会显示出来。

在这个内容应用程序中，我使用了一个 mat-select 控件，它不会在外部单击时关闭面板 -> 问题！外壳应用程序似乎捕获了外部单击事件。如果我在 shell 应用程序中使用 mat-select，一切正常。

这是我的 shell webpack 配置：

内容 webpack 配置：

这里是我的路由：

你知道什么是缺失/错误吗？

谢谢！

我已经在我的 Angular 11 应用程序中成功实现了相对较新的 webpack 5 模块联合系统，因此它可以从另一个构建中按需远程加载模块。

我没有发现的一件事是如何处理样式表和图像等资产。例如，联邦模块中有一个菜单元素需要自己的样式：

• 将它们放在组件的样式表中会使块膨胀，编译器会抱怨这一点，而且在显示菜单之前它们不会加载
• 如果样式位于联合模块的全局样式表上，则根本不会加载它们，因为我请求的是子模块而不是主模块（我想）
• 样式是联邦模块特有的，所以不能放在加载器应用程序中

我想可以编译样式并将其放入联合模块的构建资产中，但是在使用和不使用联合时会破坏链接。

我仍在尝试这个，但我认为问一下会很好。有人有这个问题吗？

我正在调查一个项目micro frontend的monorepo架构。最近已经做好了生产准备，有了它，Webpack 的微前端解决方案。通过 Module Federation，我们有了 shell 应用程序或 的概念，它包含您的微前端应用程序或.Angular 12Webpack 5Module Federationhostremotes

我也在研究monorepos，特别是nx.

Module Federation与monorepo结合是nx一回事吗？或者，是否不需要像nxwhenModule Federation已经为我提供了一个shell 包含我所有微前端应用程序的东西？据我了解，Module Federation它听起来几乎就像一个 monorepo 本身。

换句话说，Webpack 5 Module Federation和是nx monorepos互斥的还是可以/应该一起使用？