关于 Angular 微前端架构你需要知道的一切

技术在我们传统生活方式的每一步都围绕着我们。这些技术环境随着时间的推移而发展。每天都有新的技术进步席卷整个行业。为适应技术革命，企业主选择了微服务方式。但是，前端一直悬而未决，微前端作为一个福音出现了。这篇博文围绕 Angular 微前端及其优势展开。此外，它还涵盖了微前端架构角度及其实现。最后，本博客旨在帮助您确定为什么选择 Micro Frontend Angular 是您组织成功的关键。

什么是 Angular 微前端？

Angular 微前端指的是一种架构模式，涉及将大型 Angular Web 应用程序分解为小型、独立且可部署的微应用程序，每个微应用程序负责处理自己的一组功能。它打算将来自不同技术和多个域的 Web 应用程序合并为单个域下的单个 Web 应用程序，尽管技术堆栈和部署服务器可能不同，即共享基本 URL。Angular 微前端架构背后的目标是通过降低 Web 应用程序的复杂性和促进模块化来增强可扩展性、灵活性和可维护性。

对 Angular 微前端架构的需求

如今，每个企业主都希望整合种类繁多的服务，并在一个地方交付所有内容以满足用户的需求，这导致应用程序的大小增加，因为添加了大量的功能、模块和页面，这给多个应用程序带来了挑战。多个开发人员团队在一个项目上工作，因为可能会出现多个实例，其中需要多个团队来处理单个模块、页面或功能。

在这种情况下，对Angular Micro Frontends的需求成为一项强制要求，因为当多个团队或开发人员开始在同一页面上工作时，他们可能会覆盖彼此的更改，或者在提交代码和延迟发布过程时可能会面临冲突，而且重新测试的多个实例是需要确保在发布时应用程序中没有错误代码。

对于一个简单的解决方案，为了避免这种情况，每个团队或开发人员可以为他们的模块/子域创建他们的 repo 并独立工作，而不必担心其他开发人员的更改或提交更改，并且每当模块的路由被激活时，新的更改将出现在页面上。因此，所有开发人员都可以避免从目标分支/合并冲突和其他分支中定期拉取的任务。Angular 微前端架构为开发人员和产品所有者带来了各种好处，例如：

• 可以同时使用多个技术栈

• 易于添加/更新/删除代码

• 没有代码共享

• 单页应用程序或 SPA 看起来很像

• 更轻松的应用程序维护

• 改进的代码组织

• 简化的开发过程

• 高效调试

• 更好的团队协调

• 增强的灵活性

所有 Angular 应用程序都需要 Angular 微前端方法吗？

许多企业主想知道是否所有应用程序都需要微前端 Angular 方法来开发他们的 Web 应用程序。出色地！这个问题的答案很简单：NO！这种方法只推荐用于大型和复杂的应用程序开发实例，其中模块和页面相互依赖，不同的开发人员团队很难同时开发同一个应用程序。对于涉及几个模块/页面且不复杂的较小且不复杂的应用程序，传统方法是最可行的解决方案。

Angular 微前端架构与传统架构有何不同

为了更好地理解微前端架构与传统架构的不同之处，让我们举几个例子：

资料库

在传统架构中，应用程序的所有代码/模块/页面/功能都保存/提交在一个存储库中，而在 Angular 微前端架构中，不需要将所有代码/模块/页面/功能保存在同一个存储库中。

技术

在传统架构中，所有代码/模块/页面/功能大多共享相同的技术，即 Angular/PHP/JAVA/C# 等。但对于微前端架构，这不再需要，即第 1 页可以是 Angular， Page 2 代码可以是C#等。

当 Application 变大时，应用程序的初始加载时间也会增加，'Waiting' 场景不会给最终用户留下好印象。

准备好接受 Angular Micro 前端的强大功能了吗？
从我们这里聘请 Angular 开发人员来创建比以往任何时候都更快、更具可扩展性和更用户友好的前端应用程序。

微前端 Angular 架构的实现方式

实现微前端架构的方法有很多种，以下是最常见的方法：

框架

• iframe 用于加载嵌套/独立网页以及父网页。

• 它是一个 HTML 元素，通过在标签中指定所需的 URL，我们可以加载不同的网页并实现微前端架构

• 由于 Iframe 有其上下文，与父级或其他网页共享数据变得更加困难，所有操作都需要使用全局上下文和对象（即浏览器的“窗口”对象）来完成，这使得应用程序更容易受到攻击。

NGINX

• NGINX 是为现代 Web 应用程序创建的开源 Web 服务器，如果所有应用程序都在同一台服务器上，它可以提供高性能并易于维护不同应用程序的路由。

• 根据文件中提供的用于匹配路由和登陆页面的配置，NGINX 处理请求。

• 由于配置文件只是一个文本文件，因此很容易添加/更新和删除路由和登陆页面详细信息的映射

第三方库

许多库都可以实现 Angular 微前端架构，下面是一些流行的库：

• 单SPA

• 模块联合

• FrintJS

这个库不需要改变现有的代码或逻辑，它需要一些包装代码/配置来启用微前端架构。

单 SPA 库示例：

场景 1：

• 在任何公司中，都存在多个部门，它们都可以在内部 Web 应用程序上使用，如销售、人力资源、行政、采购、客户、IT 等部门，并且根据员工的角色，用户只能查看/访问该特定客户的来自基于授权的应用程序的功能。

• 所有这些部门每天都需要对应用程序进行一些更改，即添加新功能和维护等。

• 处理不同部门职责的团队/开发人员在所有其他部门的代码已经存在的共享代码中添加新功能/解决的错误。

• 由于它是共享代码，因此需要进行回归测试以确保其他部门的功能不受影响，这使得发布过程太慢。

• 一些功能是通用的，可能会被其他部门使用，例如修剪空间/排序数据/共享接口和枚举，对此的任何微小更改都可能会干扰现有功能。

场景 1 的问题

• 代码与所有部门共享

• 延迟发布过程

• 通过仅更改1个部门代码来发布所有部门代码

• 代码依赖问题

场景 2：

• 所有以上部门明智的子域/单独的 URL 创建（即 sales.mycompany.com / accounts.mycompany.com / admin.mycompany.com），因此用户需要登录到特定部门的应用程序，如果用户想要使用其他部门的应用程序，他必须重新登录其他部门的网址

• 所有这些部门代码都存在于不同的 Repository 中，因此各个部门的代码是独立的。

• 任何一个部门的代码都需要改动，只有那个代码需要测试和发布。

场景 2 的问题：

• 所有部门不共享相同的 URL

• 用户需要登录到多个部门

微前端架构将如何解决上述问题？

以上所有问题都可以通过实现微前端架构来解决，下面是解释：

• 微前端架构将允许我们共享一个公共 URL，因此使用微前端架构，URL 看起来像 ie mycompany.com/sales || mycompany.com/accounts ||mycompany.com/admin（与其他单页应用程序非常相似）

• 不再要求所有部门使用相同的编程语言代码。

• 使用本地存储或 NgRx，我们可以在所有应用程序之间共享 Session 数据，因此不需要登录多个域。

• 哪个部门的代码需要改动，只需要发布那些部门的代码，所以发布过程很快。

实施 Angular 微前端架构的分步指南

从我们上面讨论的不同方式来看，我们将使用流行且易于实现的库“single-spa”。以下是传统/现有代码结构，它具有不同的部门代码，独立发布并通过不同的 URL 访问，即 sales.mycompany.com / accounts.mycompany.com / admin.mycompany.com

要制作微前端架构的现有应用程序，请按照以下步骤操作：

第 1 步：创建根/包装应用程序

首先，我们需要创建一个新的包装器/容器应用程序。

安装包：

npm 安装 create-single-spa <-global>

在存储库级别的根目录下运行带有选项的以下命令：

创建单个水疗中心

在这里，我们正在创建一个包装器应用程序，它将在单个基本 URL 下表示/包装所有不同的域应用程序，在这里我们使用了“single-spa root config”选项，因为项目已经存在，我们只需要创建一个包装器。

注意：此命令还将安装节点模块。

上述命令的输出将是：

将创建一个“根”文件夹，其中包含一些看起来像配置文件的文件以及常见的 Angular 文件，如 tsconfig、package.json 等。

让我们简要了解每个文件：

bacancy-root-config.ts

• 所有需要的应用程序都必须在这里注册以及它们的路径（与 Angular 模块的路由器配置文件相同）

• “index.ejs”文件加载这个配置文件。

<% if (islocal) ( %)
 <script type="systemjs importmap">
   {“进口”：{"@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js","@bacancy/root-config": "//localhost:9000/bacancy-root-config.js"
      }
    }
  </脚本><% } %>

<正文>
   <无脚本>
     您需要启用 Javascript 才能运行此应用程序。
   </noscript>
  
 <import-map-overrides-full show-when-local-storage="devtools" dev-1ibs</import-nap-overrides-full><script src="https://www.bacancytechnology.com/blog/wp-content/cache/min/1/6ef749bfa41ab87c136cf605b8aa3b1e.js" data-minify="1" defer></script></body></html>

• 这里需要在“systemjs-importmap”下提及所有应用程序的位置以及应用程序的简称

• 这里已经在“//localhost:9000/bacancy-root-config.js”位置定义了“@bacancy/root-config”

• 这样，将加载“bacancy-root-config”文件并因此注册所有应用程序

索引.ejs

• EJS 代表“嵌入式 JavaScript”。

• 它允许使用自己定义的语法和标签动态生成 HTML

• 该文件在“webpack.config.js”中使用如下

返回合并（默认配置，[
  // 通过添加到这个对象来修改 webpack 配置
  插件：[
   新的 Htmlhebpack 插件（{
     注入：假，
    模板：“src/index.ejs”
   模板参数：{
     islocal: webpackConfigEnv & webpackConfigEnv.isLocal,
     有机物，
    }
   })
   ]
  })}

微前端布局.html

• 有不同的方式来注册，加载基于 URL 的应用程序，

• 这个文件可以用 HTML 格式来定义路径和加载路径的位置（类似于 Angular 应用程序的路由器配置）

<路线路径="设置">
  <application name="@org/settings"></application></路线>

• 这里在上面的格式中，我们需要添加要加载的路径和应用，根据主动路径匹配应用才会被加载

• 在这里我们还可以定义默认应用程序，以防所有路径都不匹配，即 404/登录页面

webpack.config.js
Webpack 是一种工具，用于将应用程序代码与定制一起打包成块，并将该代码从服务器加载到浏览器中。

第 2 步：运行 Root / Wrapper 应用程序

从“root”目录执行命令“npm start”将启动 single-spa 的示例应用程序，如下所示：

第 3 步：在 Angular 微前端架构中添加现有应用程序

按照以下步骤为微前端架构添加现有应用程序：

打开“Admin”应用代码：

通过运行命令安装包：

>npm i single-spa-angular

>npm i @angular-builders/custom-webpack

将“single-spa-angular”库添加到您的项目中：

>ng 添加单水疗角

由于命令输出显示添加了一些文件并更新了一些文件，因此以下是各个更改的详细信息：

• 在项目的根级别添加了一个新文件“extra-webpack.config.js”，它是 SPA 的自定义 webpack 配置

• 在 src 目录中添加了一个新文件“main.single-spa.ts”，该文件将成为应用程序的新入口点（main.ts 将被忽略）

• 将在 src 目录中创建一个组件“empty-route”

• 将在 src/single-spa 下创建一个新文件“asset-url.ts”，用于从动态位置加载资产

• 将在 src/single-spa 下创建一个新文件“single-spa-props.ts”，用于添加自定义属性，并在“main.single-spa.ts”中使用

• “package.json”文件将通过添加更新：
  ➡ devDependencies
  ➡ dependencies
  ➡ scripts

• “tsconfig.app.json”文件将通过以下方式更新：

➡ 添加“src/main.single-spa.ts”并从编译中删除“main.ts”文件

• “angular.json”文件将更新为：
  ➡对于生产构建，应用程序构建器更改为“@angular-builders/custom-webpack: browser”
  ➡对于开发，应用程序构建器更改为“@angular-builders/ custom-webpack:dev-server”
  ➡入口文件更改为“src/main.single-spa.ts”
  ➡添加自定义webpack配置

手动需要在“app-routing.module.ts”中添加“APP_BASE_HREF”，如下所示：

供应商：[{provide: APP_BASE_HREF, useValue: '/'},]

就是这样，在所有需要创建微前端架构的现有项目中按照上述步骤进行操作。

第 4 步：与 Root / Wrapper 集成

现在我们只需要通过在“systemjs-importmap”部分添加其配置来将所有应用程序与 Wrapper 项目集成

<script type="systemjs-importmap™>
  {
    进口“：{
    “@bacancy/admin”: "//localhost:4261/main.js",
    “@bacancy/network”: "//localhost:4202/main.js",
    “@bacancy/sales™: "//localhost:4263/main.js",
    “@bacancy/root-config”: "//localhost:986e/bacancy-root-config.
    “@single-spa/welcome™：“https://unpkg.con/single-spa-welcome/dist/single-spa-welcome.js”，
    “single-spa-layout”：“https://unpkg.con/single-spa-layoutgl.e.0-beta.2/dist/systen/single-spa-layout.min.js”
  }
 }</script> 删除这段注释掉的代码。

在这里，我们添加了“@bacancy/admin”、“@bacancy/network”和“@bacancy/sales”配置以及运行应用程序的服务器/端口。

此外，由于我们使用的是 Angular 应用程序，因此我们需要启用 ZoneJs，以便仅取消注释其脚本标签

<!--如果您需要支持 Angular 应用程序，请取消注释下面的脚本标记以确保只加载一个 ZoneJS 实例在 https://single-spa.js.org/docs/ecosysten-angular/#Zonejs 了解更多关于原因的信息--><脚本源= https://cdn.jsdelivr.net/npm/zone.j56.11.3/dist/zone。分钟。js"></script>

现在，我们需要将其路由应用程序加载到“micro-frontend-layout.html”中，如下所示

<single-spa-router mode="hash"><div class="主要内容"><路线路径<application name="gbacancy/admin"></application></路线><route path="网络"><application name="gbacancy/network"></application></路线><路线路径=“销售”><application name="gbacancy/sales"></application></路线><路由默认值><应用程序名称-"gsingle-spa/welcome"></application></路线></div></single-spa-router>

就是这样！您的基本微前端架构基于 Angular 的应用程序已准备就绪。

第 5 步：运行应用程序

• 通过“npm Start”运行根项目。

• 使用“ng s –port 4201”运行管理项目。

• 使用“ng s –port 4202”运行网络项目。

• 使用“ng s –port 4203”运行销售项目。

注意：您还可以在我们的GitHub存储库中找到上述解决方案。

结论

（言鼎科技）