怎么使用Angular cli

发布时间：2021-11-09 10:10:25 作者：iii
来源：亿速云阅读：248

# 怎么使用Angular CLI

## 目录
1. [Angular CLI简介](#angular-cli简介)
2. [环境准备](#环境准备)
3. [安装与配置](#安装与配置)
4. [核心命令详解](#核心命令详解)
5. [项目结构解析](#项目结构解析)
6. [高级功能](#高级功能)
7. [常见问题解决](#常见问题解决)
8. [最佳实践](#最佳实践)
9. [总结](#总结)

---

## Angular CLI简介
Angular CLI（Command Line Interface）是Angular官方提供的命令行工具，它能：
- 自动化项目脚手架搭建
- 生成组件/服务/模块等代码模板
- 集成开发服务器和构建工具
- 执行单元测试和端到端测试

> **版本支持**：当前稳定版为v16.x（截至2023年），要求Node.js 16+和npm 8+

---

## 环境准备
### 必备软件
1. **Node.js**  
   ```bash
   node -v  # 需≥16.13

npm/yarn


npm install -g yarn  # 推荐使用yarn

Git（可选）

验证环境

# 检查安装情况
node --version
npm --version

安装与配置

全局安装

npm install -g @angular/cli
# 或使用yarn
yarn global add @angular/cli

版本检查

ng version

配置镜像加速（国内用户）

npm config set registry https://registry.npmmirror.com

核心命令详解

1. 创建新项目

ng new my-app [--options]

常用选项： - --style=scss：指定样式预处理器 - --routing：自动添加路由模块 - --skip-tests：跳过测试文件生成

2. 启动开发服务器

ng serve [--port 4200 --open]

默认热重载（HMR）已启用
--prod：生产模式构建

3. 代码生成器

命令	功能
`ng g c component`	生成组件
`ng g s service`	生成服务
`ng g m module`	生成模块
`ng g d directive`	生成指令

示例：

ng generate component user --skip-tests --flat

4. 构建项目

ng build [--prod --aot]

--output-path=dist：指定输出目录
--source-map=false：关闭sourcemap

5. 测试相关

ng test        # 运行单元测试
ng e2e         # 端到端测试

项目结构解析

典型项目目录：

my-app/
├── src/
│   ├── app/               # 主应用代码
│   │   ├── components/    # 组件目录
│   │   ├── services/      # 服务目录
│   │   └── app.module.ts  # 根模块
├── angular.json           # CLI配置文件
├── tsconfig.json          # TypeScript配置
└── package.json           # 依赖管理

关键配置文件说明： - angular.json：定义构建目标、资产配置等 - tsconfig.json：TypeScript编译选项

高级功能

1. 自定义Webpack配置

ng eject  # 注意：Angular 13+已移除该命令

替代方案： 1. 安装@angular-builders/custom-webpack 2. 修改angular.json：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser"
  }
}

2. 多环境配置

ng generate environments

生成文件：

src/
└── environments/
    ├── environment.ts      # 开发环境
    └── environment.prod.ts # 生产环境

3. 库开发

ng generate library my-lib

常见问题解决

1. 安装失败

# 清除缓存后重试
npm cache clean --force

2. 版本冲突

# 检查版本兼容性
npx ng update @angular/core @angular/cli

3. 构建内存溢出

# 修改Node内存限制
export NODE_OPTIONS="--max-old-space-size=4096"

最佳实践

代码组织
- 按功能模块划分目录结构
- 使用懒加载模块
性能优化
```
ng build --prod --build-optimizer
```
安全实践
- 启用AOT编译
- 使用Content Security Policy
团队协作
- 统一CLI版本（通过package.json锁定）
- 共享angular.json配置

总结

Angular CLI极大地提升了开发效率，通过掌握： ✅ 项目初始化与配置
✅ 代码生成器使用
✅ 构建优化技巧
✅ 调试与测试方法

可以快速构建企业级Angular应用。建议定期更新CLI版本以获取最新功能。

延伸学习：
- 官方文档
- Angular CLI源码
- 《Angular开发实战》（清华大学出版社） “`

注：本文实际约2500字，完整4000字版本可扩展以下内容： 1. 添加具体示例代码片段 2. 深入讲解每个配置项参数 3. 增加性能优化章节的详细指标 4. 补充第三方插件集成教程 5. 添加可视化图表说明工作流程