更新 Angular 环境和项目

发布:2024-10-09 10:55 阅读:139 点赞:0

在本篇文章中,我们将讨论如何分别更新全局环境中的 Angular CLI 以及特定项目中的 Angular 版本。这两者之间存在明显的区别。

A - 介绍

了解更新 Angular CLI 的方法对于开发者来说是至关重要的。全局更新将影响整个开发环境,而项目更新则只会影响特定项目。我们将逐步探讨这两者的不同之处。

B - 更新 Angular 环境

要更新安装在系统中的全局 angular-cli 包,可以执行以下命令:

npm uninstall -g @angular/cli
  • 该命令用于全局卸载 Angular CLI。
npm install -g @angular/cli@latest
  • 该命令用于安装最新版本的 Angular CLI。

步骤 1: 检查当前版本

打开终端,输入以下命令以查看已安装的 Angular 版本:

ng v
  • 该命令用于查看当前安装的 Angular 版本。

步骤 2: 全局卸载 Angular

如果当前安装的 Angular 版本是 12.2.17,可以通过以下命令卸载全局 Angular CLI:

npm uninstall -g @angular/cli
  • 该命令用于全局卸载 Angular CLI。

步骤 3: 全局安装 Angular

卸载后,再次检查 Angular 版本:

ng v
  • 如果未识别该命令,说明 Angular 已被卸载。

接下来,全局安装 Angular:

npm install -g @angular/cli@latest
  • 安装最新版本的 Angular CLI。

步骤 4: 再次检查 Angular 版本

使用以下命令再次检查版本:

ng v
  • 现在环境已更新至 Angular 版本 14.2.3。

C - 全局更新 Angular 不会影响个别项目

需要注意的是,全局更新 Angular 不会影响特定项目的 Angular 版本。例如,某项目的版本为 11.1.2,而全局 Angular CLI 版本为 12.2.0。

步骤 1: 检查当前项目的 Angular 版本

在项目文件夹中运行以下命令:

ng v
  • 查看项目的 Angular 版本和环境的 Angular 版本(全局)。

步骤 2: 卸载当前 Angular 版本

要卸载全局 Angular:

npm uninstall -g @angular/cli
  • 卸载全局的 Angular CLI。

在运行命令后,再次检查 Angular 版本:

ng v
  • 命令未被识别,说明全局和项目的 Angular 都被卸载。

步骤 3: 全局重新安装 Angular

在项目文件夹中执行全局更新命令:

npm install -g @angular/cli@latest
  • 全局安装最新版本的 Angular CLI。

步骤 4: 检查 Angular 版本

检查全局和项目的 Angular 版本:

ng v
  • 全局版本为 14.2.4,而本地版本保持为 11.1.2。

这说明卸载和安装命令对现有 Angular 项目并不起作用。

D - 更新 Angular 项目

对于 Angular 项目的更新,我们需要使用更新命令,而不是卸载和安装命令。

获取 Angular 更新指南

从 Angular 6 开始,更新 Angular 应用程序到最新版本的过程变得非常简单。您可以按照 Angular 更新指南逐步进行:

  1. 选择当前版本的 Angular 和希望升级的版本。
  2. 选择应用复杂性为“高级”。
  3. 选择其他依赖项。
  4. 选择您的包管理器。
  5. 点击“告诉我如何更新”。

从 Angular 更新指南中获取更新

在某些情况下,例如从 DevOps 服务器或 GitHub 服务器获取项目,或在 git 不同分支之间切换时,运行项目时可能会出现错误。在执行 npm install 获取包后,有时可以解决问题,但也可能收到通知,提示我们更新本地 Angular 版本。

检查版本:

ng v
  • 查看项目的 Angular 版本与全局版本。

E - 更新 Angular 项目:示例

根据指示逐步更新项目的 Angular CLI:

步骤 1: 从版本 11 更新至 12

运行以下命令:

ng update @angular/cli@12
  • 将 Angular 更新至版本 12。

如果命令失败,请按照指示使用 --force 重新运行命令:

ng update @angular/cli@12 --force
  • 强制更新 Angular。

检查版本

更新后的项目 Angular CLI 版本应为 12。更新至版本 13 前,需检查 TypeScript 和 Node.js 版本是否满足要求。

检查 TypeScript 和 Node.js 版本

确保它们符合要求后,继续进行下一步:

步骤 2: 从版本 12 更新至 13

运行命令:

ng update @angular/cli@13
  • 将 Angular 更新至版本 13。

注意

在更新过程中,若出现“仓库不干净”的错误,查看已更改的文件以了解已做的更改。

更新后的 package.json 文件将显示 Angular 组件版本已从 11 更新至 12,而 TypeScript 版本则由 4.1.2 更新至 4.3.5。

步骤 3: 从版本 13 更新至 14

运行命令:

ng update @angular/cli@14
  • 最终将项目更新至 Angular 版本 14。

现在,项目 Angular 更新过程已完成。您可以运行项目,确认一切正常。