为此，在应用程序外壳中定义了以下路由配置：入路径指向通过“Menu”webpack 配置提供的“MenuModule”，如下所示（来自另一个应用程序的示例）：
动态导入路径的构成，来源：自己的图解
除了集成整个模块之外，还可以专门集成各个 Angular 组件。当微前端不打算代表 Web 应用程序的整个页面，而是作为更高级别页面的一部分时，此方法非常有用。一个这样的例子是我们系统的“购买”微前端，它呈现一个按钮组件。
框架提供的 ComponentFactoryResolver 可用于在 Angular 组件 澳大利亚 whatsapp 数据 中渲染动态加载的微前端。为此，使用 ViewChild() 在相应的 HTML 模板中创建对容器的引用，然后将其用作要呈现的组件的出口。从第28行可以看出，动态导入路径对应的方案与通过延迟加载加载“MenuModule”时的方案相同。加载模块和组件代表了一种合并多个微前端的特定于 Angular 的方法。如果您想要更加独立于框架，您还可以使用 Web 组件定义单独的子系统，然后将它们集成到任何应用程序中。由于 Web 组件代表了 Web 标准，因此它们既可以独立使用，也可以与任何现代 JavaScript 框架结合使用。
结论
我们已经看到，通过一些准备和配置工作，Angular 应用程序可以由多个子应用程序（无论是模块还是组件）组成。这里展示的原型远没有功能齐全的应用程序复杂，后者需要更多的组织远见和努力。尽管如此，它还是展示了如何基于现代 Web 框架实现分布式前端架构。只有时间才能证明微前端是否能够成为经典前端整体的替代品。当然，有些项目的代码库和开发流程将受益于切换到微前端，但组织复杂性形式的进入障碍不应被低估。
如果您想了解有关微服务的更多信息，请查看我的同事 Stephan Wies 的博客文章，主题为All About Context！。
您想了解更多关于 adesso 世界中令人兴奋的话题吗？那么请看一下我们之前发布的博客文章。
达里奥·布劳恩图片
作者 达里奥·布劳恩
Dario Braun 是 adesso 的软件工程师，主要专注于 Web 应用程序的开发。他使用 Angular、React 和 NestJS 等现代框架，开发满足客户特定要求的个性化软件解决方案。
类别： 软件开发
标签： 前端 微服务 建筑学
阿斯达夫
我们的博客文章一览
在我们的技术博客中，我们将带您踏上令人兴奋的 adesso 世界之旅。您可以在我们之前的博客文章中找到其他有趣的主题。
至所有博客文章
阿斯达夫
我们的 adesso 博客时事通讯
您想定期收到我们的 adesso 博客更新吗？然后只需订阅我们的时事通讯，您将通过电子邮件方便地收到我们技术博客的最新文章。