如果我们在现有的 Angular 应用程序中安装该包，如下所示，我们将获得一个 webpack 配置文件，我们可以在构建过程中自定义和使用该文件由 Angular CLI 考虑。 project 和 --port 选项用于传递项目的名称以及 Angular 开发服务器向项目提供项目的端口。在 webpack 配置的帮助下，我们可以定义我们的微前端。作为微前端架构一部分的每个应用程序都提供了自己的 webpack 配置。这定义了应该集成哪些其他应用程序以及应用程序的哪些部分（例如模块或组件）应该发布到外界。后者可以被其他微前端使用。以下 webpack 配置是“Menu”应用程序的一部分：
“暴露”对象定义了应用程序的哪些部分可以在外部发布并在其他地方集成。在这种情况下，“Menu”微前端通过“./MenuModule”键公开“menu.module.ts”文件中的模块。 “remotes”对象定义了使用哪些其他微前端以及它们可以用来集成哪些 URL。在这种情况下，“购物车”微前端的入口点是通过相应的 URL 引用的。 “filename”属性描述了 JavaScript 文件的名称，除其他外，它确保了微前端及其路径的解析。它由 webpack 生成，并作为各个微前端的入口点。
下图展示了所有子应用的webpack配置之间的联系：
连同各个微前端，来源：自己的插图
集成微前端的一种方法是使用 Angular 的延 捷克共和国 whatsapp 数据 迟加载功能。为此，在应用程序外壳中定义了以下路由配置：
导入路径指向通过“Menu”webpack 配置提供的“MenuModule”，如下所示（来自另一个应用程序的示例）：
动态导入路径的组成，来源：自己的图解
动态导入路径的组成，来源：自己的表述
除了集成整个模块之外，还可以专门集成各个 Angular 组件。当微前端不打算代表 Web 应用程序的整个页面，而是作为更高级别页面的一部分时，此方法非常有用。一个这样的例子是我们系统的“购买”微前端，它呈现一个按钮组件。
框架提供的 ComponentFactoryResolver 可用于在 Angular 组件中渲染动态加载的微前端。为此，使用 ViewChild() 在相应的 HTML 模板中创建对容器的引用，然后将其用作要呈现的组件的出口。从第28行可以看出，动态导入路径对应的方案与通过延迟加载加载“MenuModule”时的方案相同。加载模块和组件代表了一种合并多个微前端的特定于 Angular 的方法。如果您想要更加独立于框架，您还可以使用 Web 组件定义单独的子系统，然后将它们集成到任何应用程序中。由于 Web 组件代表了 Web 标准，因此它们既可以独立使用，也可以与任何现代 JavaScript 框架结合使用。
结论
我们已经看到，通过一些准备和配置工作，Angular 应用程序可以由多个子应用程序（无论是模块还是组件）组成。这里展示的原型远没有功能齐全的应用程序那么复杂，后者需要更多的组织远见和努力。尽管如此，它还是展示了如何基于现代 Web 框架实现分布式前端架构。只有时间才能证明微前端是否能够成为经典前端整体的替代品。当然，有些项目的代码库和开发流程将受益于切换到微前端，但组织复杂性形式的进入障碍不应被低估。
如果您想了解有关微服务的更多信息，请查看我的同事 Stephan Wies 的博客文章，主题为All About Context！。