Angular 从 12 更新到 17 (2) --- 在 nx 环境中

本文旨在讨论在 NX 环境中对 Angular 应用程序的升级过程。

A - 简介

本文的内容如下：

• A - 简介
• B - 更新 Angular 应用程序的方法
• C - 开始更新 Angular
• D - 什么是用户体验（UX）
• E - 如何更新 NX-Angular 应用程序
• F - 更新 NX-Angular 应用程序

B - 更新 Angular 应用程序的方法

我们遵循文章《将 Angular 从 12 升级到 17》的初步工作，开始更新 Angular 应用程序。

对于 Angular 应用程序的升级，我们在上一篇文章《环境和项目的 Angular 更新》中讨论过。从 Angular 6 开始，升级 Angular 应用程序到最新版本的过程变得非常简单。您可以逐步遵循 Angular 更新指南，例如：

• 上述内容提供了将 Angular 从 2.4 升级到 7 所需的详细步骤。

C - 开始更新 Angular

我们需要做的事情是：

1. 获取当前 Angular 版本；
2. 根据 Angular 版本，查阅 Angular 更新指南以获取更新计划。

让我们首先获取项目的 Angular 版本。环境原本是这样的：

（此处应描述当前的环境设置）

为了使应用程序正常运行，我们将 Node 版本降级到 v16：

（此处应描述降级过程）

我们需要在项目中运行 ng -v 以获取项目的 Angular 版本。然而，我们遇到了以下问题：

（此处应描述遇到的错误）

为了解决这个问题，我们将 Node.js 升级到 18.9.0，然而，项目中的 Angular 版本仍然与环境版本相同：--- 版本 18.2.4。

这与 package.json 文件中显示的版本应该是 12 的情况相悖。

另一方面，如果我们全局卸载 Angular：

（此处应描述卸载过程）

应用程序依然能够正常运行。

我们意识到 Angular 应用程序并不是由 Angular 环境驱动，而是由 NX 驱动。

D - 什么是用户体验（UX）

在 Google 上搜索“Angular vs. NX”，AI 告诉我们：

• Nx 和 Angular CLI 都是用于 Angular 项目的工具，但它们最适合不同的项目需求和规模：

Angular CLI

• 适合小型到中型项目，Angular CLI 是一个简单高效的工具。它使用 Webpack 的缓存来加速过程。

Nx

• 更适合大型复杂应用，特别是那些使用单一代码库的方法。Nx 具有多种加速特性，包括缓存任务、资源共享和自动依赖更新。

其他区别

• 依赖可视化：Nx 提供了内置命令 nx dep-graph，可以可视化依赖关系图，而 Angular CLI 没有此命令。
• 受影响的命令：Nx 的内置命令 nx affected:build 只构建受更改影响的项目，而 Angular CLI 没有此命令。
• 架构：Nx 鼓励将应用程序分解为更小的以域为中心的库，这可以改善应用程序的架构和可维护性。
• 版本更新：使用 Nx，您可以通过几个命令更新整个代码库，以确保所有内容兼容。

Nx 的最新版本支持活跃支持的 Angular 版本。

E - 如何更新 NX-Angular 应用程序

在 Google 上搜索如何更新 NX-Angular 项目，AI 告诉我们：

要更新一个 NX-Angular 项目，您可以使用以下命令：

npx nx migrate latest  # 更新 package.json 中的依赖项并生成 migrations.json 文件

（上述命令用于更新项目的依赖项）

npm install  # 安装新的依赖项

（此命令用于安装新依赖项）

npx nx migrate --run-migrations  # 根据 migrations.json 执行迁移脚本

（此命令用于执行迁移脚本）

Nx 迁移可以简化更新 Angular 和 Nx 工作区的过程。然而，它们可能并不总是涵盖所有方面，因此您可以参考其他项目以获取指导。您也可以创建一个最新版本的新工作区，比较更改并将其合并到现有工作区中。

更新时的其他考虑事项：

• NX 插件：NX 插件可以为其特定领域提供迁移。例如，NX React 插件知道在哪里找到 React 配置文件以及如何在更新到特定版本的 React 时应用更改。
• 跳过包更新：如果跳过包更新，您可以在“下一步”部分找到建议的命令来运行。
• 重新运行迁移：NX migrate 允许您多次运行相同的迁移。
• 重新排序迁移：NX migrate 允许您重新排序迁移。