Skip to main content

Angular CLI 常用命令

Angular CLI 是官方提供的命令行工具，用于快速创建、构建、测试、部署 Angular 应用。通过 CLI 可以大幅提升开发效率，规范项目结构，统一构建流程。

⚙️ 安装 Angular CLI​

npm install -g @angular/cli

安装完成后你可以使用 ng --version 查看版本信息。

🚀 初始化新项目​

ng new my-app

参数说明：

  • --routing：是否生成路由模块
  • --style=scss：选择样式格式（支持 css / scss / sass / less）

💻 本地开发与构建​

ng serve
  • 启动开发服务器，默认地址为 http://localhost:4200
  • 使用 --open 可自动打开浏览器
ng serve --port 4300 --open

🏗️ 项目构建​

ng build
  • 默认构建生产环境
  • 构建产物会输出到 /dist 目录

构建生产版本：

ng build --configuration production

🧱 常用生成命令（ng generate / ng g）​

ng g component components/button

✅ 测试命令​

ng test
  • 启动 Karma 单元测试，实时监测代码变动
ng e2e
  • 启动端到端测试（需配置 Cypress 或 Protractor）

🧩 环境配置管理​

Angular 支持多环境切换：

ng build --configuration=staging

配置文件在 angular.json 中定义，实际读取 src/environments/environment.ts 和 environment.prod.ts。

📁 CLI 项目结构简析​

my-app/
├── src/
│   ├── app/              # 主要业务代码
│   ├── assets/           # 静态资源
│   ├── environments/     # 环境配置
├── angular.json          # CLI 主配置文件
├── package.json          # npm 依赖定义

🧠 CLI 调试技巧​

如何查看完整帮助命令？
ng help              # 总览帮助
ng generate --help   # 查看子命令用法
如何使用热重载与代理配置？
  • 热重载默认开启
  • 配置代理到后端：

proxy.conf.json:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}
ng serve --proxy-config proxy.conf.json

📌 示例：一键生成页面结构​

ng g module pages/user --route user --module app
ng g component pages/user/profile
ng g service pages/user/profile/profile

✅ 总结​

  • 使用 ng new 初始化项目，ng serve 启动开发环境
  • 通过 ng g 快速生成模块、组件、服务等
  • CLI 提供热重载、环境切换、代理支持等特性
  • 项目结构清晰规范，适合大型企业级应用

📚 推荐资源​