Angular CLI 安装和使用

发表于 更新于 分类于 阅读次数： 本文字数： 1.8k 阅读时长 ≈ 2 分钟

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 安装和使用