问题标签 [webpack-module-federation]

我通过三个项目尝试模块联合：shell、app1 和 app2。shell 的 webpack 配置是这样的：

app1 和 app2 的配置如下：

shell负责根据路由加载app1和app2。打开页面app1（或app2）时，就可以了。但是如果从一个应用程序导航到另一个应用程序，它将引发异常：容器初始化失败，因为它已经使用不同的共享范围进行了初始化。

我发现当打开一个应用页面时，比如 app1 页面，它会发送一个范围对象，包括 react 和 react-dom 到 share 模块的 init 方法。但是当导航到 app2 时，app2 创建的另一个作用域对象也将被发送到共享模块的 init 方法。共享模块会比较这两个共享范围，如果不一样，就会异常。

我不确定这是一个错误，或者我缺少一些配置。我尝试查找与模块联合相关的文档，但未找到与共享范围相关的有用信息。有没有人知道这件事？顺便说一句，我也试过

它也不起作用。

问候

我正在开发一个利用 Webpack Module Federation 的微前端的应用程序。

我的“主机”应用程序提供了一个登录屏幕和一个带有菜单、页眉和页脚的布局。我的“模块”是我的应用程序的部分，可通过单击菜单项访问。

虽然我的默认视图是“主机”应用程序，但大部分工作将在模块中完成。我面临的问题是，一旦我更改了远程模块的代码 - 应用程序（我正在查看的主机）不会实时重新加载，这使得开发人员体验不那么舒服。

我可以单独打开模块（在它自己的端口上）并且实时重新加载将起作用，但这对我来说也不是一个好的开发人员体验，因为我想看到整个画面，而不仅仅是子应用程序（微-前端）。

有没有办法让主机知道模块已更改并且应该重新加载？

使用 Webpack 的Module Federation Plugin 进行微前端架构，如何从不同的存储库导入远程？

我正在尝试按照这个示例Module federation with angular 使用webpack5 模块联合以 Angular 实现微前端概念，但我遇到了这个错误

我尝试了这个答案中提供的解决方案inject() must be called from an injection context但它不起作用。

目前我在两个应用程序中都使用 Angular 版本 11。

正在导入的应用的 package.json（子）

应用程序的 package.json 导入另一个应用程序（父）

我想知道将路由从app_02导入到shell 应用程序app_01的最佳方法是什么。一种方法可能是添加子路由，但我想知道是否有另一种方法可以做到这一点，这样我们就可以做到这一点，这样我们就不必再次将组件导入 shell 应用程序。这样做的主要目的是能够将具有内部路由的不同包从数据库中的配置导入到 shell 中。

我正在使用 Webpack 5 Module Federation 来使用远程模块。一切都按预期工作。

到目前为止，远程模块 URL 是公开的，不需要任何类型的身份验证。这对开发人员来说很好。目的。但在生产中，访问该远程模块将需要某种身份验证。

我在 Webpack 文档中找不到任何关于身份验证的信息。

我想知道在这种情况下我有什么选择？

对于在模块联合微前端 next.js 应用程序中实现 i18n，您有什么建议？

目前（刚刚开始）我react-intl通过在_app.tsx

然后从另一个微前端导入组件时，我将intl对象作为参数发送。

这样我就可以在微应用组件中使用它来格式化字符串。

这种方法的警告是我只能使用函数进行格式化，我不能使用 React DOM 标签，例如：

<FormattedMessage id="" />

我没有找到太多文档，所以不确定这是一个好方法。那些人知道或建议任何其他解决方案吗？

提前致谢！

查看 webpack 5 中可用的新模块联合，这在开发场景中非常有效，但会导致类似以下示例的配置。

有没有更好的方法来处理这个？

webpack.config.js

package.json

我有一个 Angular 11 应用程序，我通过 angulararchitects 的组件使用 Webpack 5 和 Module Federation 来创建微前端应用程序。为了按照我想要的方式制作动画，我需要一些 scss 和一些 angular。为了能够在一个地方（scss 变量）对这些动画进行配置，我想导出它们并通过在我的角度组件中导入来使用它们。我已经阅读了几篇关于如何实现这一点的文章，但是由于在 Angular 11 中处理 css 模块的方式已经改变，并且通过使用 angulararchitects 拥有 webpack.config 和自定义构建器，我有点卡住了如何完成这个。

到目前为止，我所做的：

• 在 scss 文件中导出我的变量
• 为变量创建一个类型文件

我被困在哪里：

• 在哪里包含 ngx-builder-plus 的输入文件（我看到包含所有 .d.ts 文件，但我不确定这是否足够）
• 如何使用 Angular 11 设置 webpack，以便正确导出变量

有什么想法或方向吗？谢谢马库斯

我正在为 webpack 模块联合插件和子组件而苦苦挣扎。

我从按预期工作的vue3-demo分叉。（简单示例）

但是当我创建包含另一个组件的更复杂的组件时，它不会被渲染。在我的例子中，它是包含 TextInput 的 TextField。

我创建了最小版本，我想向您展示我对模块联合 webpack 插件的问题。

我在这里提交了我的例子

你能帮帮我吗，为什么它不起作用？它是一个错误吗？我尝试了同样的反应并且它有效。

结果：组件 TextField 未呈现。 结果图片