关于Angular的微前端架构

什么是微前端？

微前端是一种将微服务的概念扩展到Web应用程序前端的架构方法。在微前端架构中，复杂的Web应用程序被拆分成更小、可独立部署和可维护的单元，称为微前端。每个微前端负责用户界面的特定部分及其相关功能。

微前端的关键特征和概念包括：

独立性： 微前端是自包含的，可以独立开发、测试和部署。这种自治性允许不同团队在应用程序的不同部分上进行工作，减少协调成本。
技术无关性： 每个微前端可以使用不同的前端技术（例如 Angular、React、Vue.js），只要它们可以集成到父级或Shell应用程序中。
隔离性： 微前端在代码和依赖方面相互隔离。这种隔离确保一个微前端的变化不会影响其他微前端。
集成： 一个容器或Shell应用程序负责集成和编排微前端。它提供用户界面的整体结构，并处理微前端之间的路由。
独立部署： 微前端可以独立部署，实现持续交付和更快的更新。这降低了回归问题的风险，并加快了发布周期。
松耦合： 微前端通过定义良好的API和共享协议（如HTTP）进行通信，实现松耦合。这种关注点的分离简化了开发和维护。
用户界面组合： 容器应用程序通过组合微前端来组装用户界面。这种组合可以在服务器端（服务器端包含）或客户端（客户端路由）上完成。
扩展和性能： 微前端使应用程序的特定部分可以进行水平扩展，有助于优化频繁访问的区域的性能。
分散式团队： 不同的团队或开发组可以负责各自的微前端。这种分散对于大型或分布式组织是有利的。

微前端架构在大型、复杂的Web应用程序中特别有用，因为采用单体架构可能导致开发瓶颈、增加复杂性，并且难以维护和扩展应用程序。

通过使用微前端，组织可以在前端开发过程中实现更大的灵活性、敏捷性和可维护性，与软件架构领域中微服务的更广泛趋势保持一致。

将微前端托管到单个Shell UI中

让我们看看如何将两个Angular微前端托管到单个Shell UI 中。

要在单个Shell Angular UI 中托管两个Angular微前端，您可以使用微前端框架如 single-spa 或 qiankun 来实现。这些框架使您能够将多个独立开发的微前端集成到单个应用程序Shell中。以下是如何设置这样的架构的高级概述：

1. 创建Shell Angular应用程序

设置您的Shell Angular应用程序作为托管微前端的主要容器。您可以使用Angular CLI或任何其他首选方法创建此应用程序。

2. 创建微前端

将您的两个Angular微前端作为独立的Angular应用程序创建。每个微前端应该有自己的路由和功能。

3. 为微前端配置路由

在每个微前端应用程序中，配置路由，以便每个微前端都有自己的路由集。您可以使用Angular路由来实现这一点。

4. 使用微前端框架

在您的Shell Angular应用程序中集成微前端框架，如 single-spa 或 qiankun。

以下是如何在Shell Angular应用程序中使用 single-spa 的示例：

安装 single-spa：

npm install single-spa

Shell Angular应用程序代码

在您的Shell Angular应用程序中，配置 single-spa 来加载微前端。

import { registerApplication, start } from 'single-spa';

// 注册微前端
registerApplication({
 name: 'customer-app',
 app: () => System.import('customer-app'), // 加载customer-app
 activeWhen: (location) => location.pathname.startsWith('/customer-app'),
});

registerApplication({
 name: 'accounts-app',
 app: () => System.import('accounts-app'), // 加载accounts-app
 activeWhen: (location) => location.pathname.startsWith('/accounts-app'),
});

// 启动single-spa
start();