Angular CLI 安装和使用

1. Angular 介绍

关于 Angular 版本,Angular 官方已经统一命名 Angular 1.x 同一为 Angular JS;Angular 2.x 及以上统称 Angular;

CLI 是 Command Line Interface 的简写,是一种命令行接口,实现自动化开发流程. 它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。

官方文档:https://angular.io

GitHub:https://github.com/angular/angular-cli

Angular Material:https://material.angular.io/

2. 安装前的准备工作

安装前阅读一下 angular 版本兼容性说明文档, 确定需要安装的版本以及依赖包的版本.

避免使用过程中出现各种奇怪的错误. 本教程以 Angular 16 为例

2.1. 2.1 首先确认安装了 node.js 和 npm,cnpm

1
2
3
4
// 显示当前node和npm版本
$ node -v
$ npm -v
// node 版本高于v16.14.2 npm版本高于8.5.0

如果没有安装 node 可以参考我的博客文章 - nodejs 安装可以参考 安装并配置 nodejs | 鹏叔的技术博客

2.2. 2.2 确认是否安装了 git

1
2
3
# 显示当前git版本
$ git --version
git version 2.40.0

如果没有安装 git 可以参考我的博客文章 - Windows 上安装 git2.x

2.3. 2.3 全局安装 typescript(可选)

版本可以根据实践情况调整, 但是要保证与 nodejs 以及将要安装的 Angular 版本兼容.
兼容列表可以查询https://angular.io/guide/versions

1
2
3
4
5
6
# npm 全局安装typescript
$ npm i -g typescript@4.9.3

# 验证 typescript是否安装成功
$ tsc -v
Version 4.9.3

3. 安装 Angular CLI

3.1. 3.1 安装 Angular CLI

1
2
3
4
# 安装指定版本的Angular cli
npm install -g @angular/cli@16.2.10
# 或者
cnpm install -g @angular/cli@16.2.10

经过不算漫长的等待,你的 Angular CLI 就装好了。确认一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$ ng v

// 出现下面画面说明安装成功,如果不成功你可能需要uninstall一下,再重新来过
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/


Angular CLI: 16.2.10
Node: 16.14.2
Package Manager: npm 8.5.0
OS: win32 x64

Angular:
...

Package Version
------------------------------------------------------
@angular-devkit/architect 0.1602.10 (cli-only)
@angular-devkit/core 16.2.10 (cli-only)
@angular-devkit/schematics 16.2.10 (cli-only)
@schematics/angular 16.2.10 (cli-only)

至此 Angular 完整完成, 如果安装过程中遇到问题需要卸载重装或者需要升级, 可以参考以下步骤.

4. 卸载 Angular CLI

1
npm uninstall -g @angular/cli

5. 升级 Angular CLI

首先卸载 Angular CLI

1
npm uninstall -g @angular/cli

然后安装新版本的 Angular CLI

1
2
3
npm cache clean -f
npm install -g @angular/cli@latest //升级到最新版本
npm install -g @angular/cli@版本号 //升级到指定版本

6. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

7. 参考文档

Angular CLI 安装和使用

作者

鹏叔

发布于

2022-03-06

更新于

2024-07-10

许可协议

评论