更新 Angular 环境和项目
在本篇文章中,我们将讨论如何分别更新全局环境中的 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 更新指南逐步进行:
-
选择当前版本的 Angular 和希望升级的版本。 -
选择应用复杂性为“高级”。 -
选择其他依赖项。 -
选择您的包管理器。 -
点击“告诉我如何更新”。
从 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 更新过程已完成。您可以运行项目,确认一切正常。