Hong Kong Data

模块捆绑器 webpack 从版本 5 及更高版本提供了一个名为“模块联合”的功能，借助该功能，可以在运行时将单独捆绑和提供的应用程序集成到另一个应用程序中。除其他外，捆绑器还用于 Angular CLI（用于开发和交付 Angular 应用程序的标准工具）。因此，模块联合是在 Angular 应用程序环境中实现微前端架构的一种有趣的方法。在下一节中，我将向您展示如何使用模块联合来设计基于 Angular 的微前端，并将它们组合到一个通用应用程序中。

我们想要实现一个基于 Angular 和 Module Federation 的原型应用程序，它由以下子系统组成：

原型应用，来源：自己的插图
原型应用，来源：自己的插图

红色： App Shell：Angular 组件作为框架应用程序的一部分
黄色： “购买”组件：动态加载的 Angular 组件
橙色： “Banner”组件：动态加载的Web组件
绿色： “购物车”和“菜单”组件：动态加载的 Angular 模块的一部分
为了使用 Module-Federation，Angular CLI 使用的 webpack 配置必须进行相应调整。最简单的方法是使用自定义 Angular CLI 构建器。为此，我们使用构建器，它是 npm 包 的一部分。让我们在现有的 Angular 应用程序中安装 澳大利亚 whatsapp 数据​ 该包，如下所示，我们得到一个 webpack 配置文件，我们可以在构建过程中自定义和使用该文件Angular CLI 的帐户。 project 和 --port 选项用于传递项目的名称以及 Angular 开发服务器向项目提供项目的端口。在 webpack 配置的帮助下，我们可以定义我们的微前端。作为微前端架构一部分的每个应用程序都提供了自己的 webpack 配置。这定义了应该集成哪些其他应用程序以及应用程序的哪些部分（例如模块或组件）应该发布到外界。后者可以被其他微前端使用。以下 webpack 配置是“Menu”应用程序的一部分：

“暴露”对象定义了应用程序的哪些部分可以在外部发布并在其他地方集成。在这种情况下，“Menu”微前端通过“./MenuModule”键公开“menu.module.ts”文件中的模块。 “remotes”对象定义了使用哪些其他微前端以及它们可以用来集成哪些 URL。在这种情况下，“购物车”微前端的入口点是通过相应的 URL 引用的。 “filename”属性描述了 JavaScript 文件的名称，除其他外，它确保了微前端及其路径的解析。它由 webpack 生成，并作为各个微前端的入口点。



集成微前端的一种方法是使用 Angular 的延迟加载功能。