Angular - CLI 命令
Angular CLI 是 Angular Command Line Interface 的简称,是一种用于创建和管理 Angular 应用的工具。它基于 Node.js 构建,并通过 NPM 安装。它提供了一组命令,用于生成、构建、测试和部署 Angular 项目。
借助 Angular CLI,开发者可以快速设置新项目、添加 components、services、directives 以及其他任何功能。本教程将详细解释所有 Angular CLI 命令。
Node.js 是一种运行时环境,允许你在 Web 浏览器之外运行 JavaScript 代码。NPM(Node Package Manager)是随 Node.js 一起提供的工具,帮助你管理项目的包和依赖。
验证 CLI
在学习 Angular CLI 命令之前,我们需要确保你的机器上已安装 Angular CLI。如果已安装,可以使用以下命令验证 −
ng version
运行此命令后,你可能会看到以下输出 −
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI : 21.0.0
Angular : 21.0.0
Node.js : 24.11.0
Package Manager : npm 11.6.1
Operating System : win32 x64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 21.0.0 │ ^21.0.0 │
│ @angular/cli │ 21.0.0 │ ^21.0.0 │
│ @angular/common │ 21.0.0 │ ^21.0.0 │
│ @angular/compiler │ 21.0.0 │ ^21.0.0 │
│ @angular/compiler-cli │ 21.0.0 │ ^21.0.0 │
│ @angular/core │ 21.0.0 │ ^21.0.0 │
│ @angular/elements │ 21.0.0 │ ^21.0.0 │
│ @angular/forms │ 21.0.0 │ ^21.0.0 │
│ @angular/localize │ 21.0.0 │ ^21.0.0 │
│ @angular/platform-browser │ 21.0.0 │ ^21.0.0 │
│ @angular/router │ 21.0.0 │ ^21.0.0 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 5.9.3 │ ~5.9.2 │
│ vitest │ 4.0.12 │ ^4.0.8 │
└───────────────────────────┴───────────────────┴───────────────────┘
如果 CLI 未安装,则使用以下命令安装它 −
npm install -g @angular/cli
对于 MAC 或 Linux 操作系统,使用以下命令 −
sudo npm install -g @angular/cli
Angular CLI 命令
有许多 CLI 命令用于管理 Angular 应用,所有命令都以前缀 ng 开头,代表 Angular。以下表格列出了一些 Angular CLI 命令 −
| 序号 | 命令及描述 |
|---|---|
1. |
ng new <project-name> 用于创建 Angular 应用。 |
2. |
ng generate component <component-name> 用于在 Angular 中创建 component。 |
3. |
ng generate class <class-name> 用于在 Angular 中创建新的 class。 |
4. |
ng generate pipe <pipe-name> 用于在 Angular 中创建自定义 pipe。 |
5. |
ng generate directive <directive-name> 用于在 Angular 中创建新的 directive。 |
6. |
ng generate module <module-name> 用于在 Angular 中创建新的 module。 |
7. |
ng generate interface <interface-name> 用于在 Angular 中创建 interface。 |
8. |
ng generate webWorker <webWorker-name> 用于创建新的 web worker。 |
9. |
ng generate service <service-name> 用于创建新的 service。 |
10. |
ng generate enum <enum-name> 用于生成新的 enum。 |
11. |
ng add [name] 用于为项目添加外部 library 的支持。 |
12. |
ng build 用于编译或构建 Angular 应用。 |
13. |
ng config 用于在工作区的 angular.json 文件中检索或设置 Angular 配置值。 |
14. |
ng config 用于在工作区的 angular.json 文件中检索或设置 Angular 配置值。 |
15. |
ng doc <keyword> 此命令会在浏览器中打开官方 Angular 文档,并搜索指定的 keyword。 |
16. |
ng version 显示 Angular CLI 版本。 |
17. |
ng update 更新应用及其依赖项。 |
18. |
ng test 在项目中运行 unit test。 |
19. |
ng serve 用于构建并服务应用。同时在文件更改时重新构建。 |
20. |
ng help 列出可用命令及其简短描述。 |
21. |
ng e2e <project> [options] 构建并服务 Angular 应用,然后使用 Protractor 运行端到端测试。 |
22. |
ng deploy 将 Angular 应用部署到特定的托管服务,例如 Firebase 或 GitHub Pages。 |
23. |
ng cache clean 删除磁盘缓存。 |
24. |
ng cache info 显示磁盘缓存配置和统计信息。 |
25. |
ng analytics disable 将禁用用户的 analytics 收集和报告。 |
26. |
ng analytics info 显示收集的 analytics。 |