问题标签 [webpack-module-federation]

2021 年 5 月 23 日，我没有看到模块联合的 hmr 实施。

如本期所述，它不会很快实施。在这个问题中还有为模块联合投票 hmr 的链接 - webpack 路线图 ( https://webpack.js.org/vote/ )。

https://github.com/webpack/webpack/issues/11182

我的问题是 - 是否有人已经使用 webpack 5 实现了 hmr：

1. 也许通过分叉 webpack-hot-middleware 和 webpack-dev-middleware
2. 也许它已经实现了
3. 也许有人已经用 livereload 工具实现了它

任何帮助或实施都会很棒！

先感谢您。

尝试将现有的 react + redux 应用程序迁移到微前端。

独立应用程序可以在其 PORT 中使用 react-redux 运行。当作为容器应用程序内的子应用程序访问它时，容器应用程序没有加载并抛出错误

没有ReactReduxApp(Child1)我的Container(Parent)应用程序在ReactApp(Child2)下运行良好

shared共享这些组件的应用程序部分中存在相同的配置，但出现错误。我已经尝试过@emotion/react: {eager: true}，从共享部分中完全删除“@emotion/react”。但没有运气。

webpack.config.js 为 Module Federation 拉取远程 js。

我如何在遥控器中或在遥控器之外使用本地 JS 文件？我在另一个文件夹中有一个简单的 react.js 库，其中包含./dist/browser/remote-entry.js文件。我无法发布到 npm，所以我试图从本地加载它。会不会是这样的：

我有一个角度应用程序，我决定在其中公开这个组件：

组件以这种方式呈现：

在我的主应用程序中，我想这样做：

如果组件是本地的，就像我会做的那样，如何实现这一点？理论上我必须：

我正在使用Manfred Steyer模块联合插件，并且 在尝试加载导入ReactiveFormsModule 和 FormsModule的外部模块时在控制台中遇到NullInjectorError ，这些模块已在主机和子 mfe 上的 webpack 配置中共享。独立运行遇到问题的子 mfe（允许 Angular 通过 AppModule 引导）应用程序运行完美，所以这让我相信我的 webpack 配置有问题或者与这个库不兼容。

这是错误 - 仅在尝试通过 shell 加载时发生：

这是我的 shell 应用程序 webpack.config.js：

这是我的应用模块：

这是我的 authenticate-mfe webpack.config.js 在这种情况下的子 mfe：

这是 authenticate-mfe 的 AuthenticationModule：

调用表单指令的 html 导致问题：

对此的任何帮助将不胜感激。我有点不知所措，因为如果在加载 mfe 的 shell 方面删除了 HTML 中的表单代码，它工作正常，但在独立加载时表单代码工作正常，编译或控制台内没有错误。

提前致谢。

当我将 React 与 ReactRouter 一起使用时，我可以延迟加载应用程序的入口文件吗？remoteEntry.js当我进入页面时，我拥有的每个应用程序都有许多文件请求。由于性能，我不想在一开始就获取它。我想在访问特定应用程序的路线时加载它们。

我正在尝试使用模块联合构建一个 vue js 2 微前端。我不想像这样通过 webpack.config.js 使用静态远程导入

我正在寻找一种将 vue 组件动态导入我的主机应用程序的方法。到目前为止，我尝试了这种方法，但我只找到了适用于 angular 或 react 的示例。

目标是拥有多个远程前端，可以在某处自动注册，也许在某种商店中。然后主机应用程序可以访问这个存储并获取所有已注册的远程应用程序（名称、url、组件）。宿主应用程序然后加载组件并且应该能够使用它们。我远程导入组件 HelloDerp，加载过程工作正常，但我不知道如何在我的主机应用程序上呈现它。我阅读了关于动态和异步导入的 vue js 文档，但我认为这只适用于本地组件。到目前为止，我在主机应用程序中得到了什么：

在一个Angular 12名为 的项目myShell中，我实现了一个nxmonorepo，然后使用命令将我的项目定义为一个Webpack 5 Module Federation微前端。shellng add @angular-architects/module-federation --project myShell --port 4200

现在我想使用Angular CLI来生成一个新的微前端remote，我将命名为mfe1. 我将如何使用nx或ngCLI 完成此操作？例如，如果我导航到我的apps文件夹（其中包含myShell项目）并执行ng new mfe1，我会收到错误消息：The new command requires to be run outside of a project, but a project definition was found at ...filepath/angular.json. 我也无法运行ng g c，因为 Angular 微前端应用程序不仅仅是一个简单的组件。

是否有一个Angular CLI命令可以用来创建一个新的微前端远程，或者每个远程应用程序必须手动创建乏味？

我正在关注本教程，并尝试在 shell 和 mfe1 应用程序之间共享一个库。我在工作空间目录外创建了一个在 root 中注入的服务的 lib，然后将其添加到教程 package.json，并将其导入 shell 和 mfe1。在两个项目的 webpack 配置中，我添加了以下配置

在测试 shell 时，我注意到单例服务被启动了两次，第一次是在加载 shell 时，第二次是在移动到 mfe1 时，也许我遗漏了一些东西，但 singleton: true配置的目的不是确保该服务只有一个实例存在？