AngularCLI命令大全

new - 创建新项目

创建一个新的Angular工作区。

# 创建基本项目
ng new my-app

# 创建带路由和SCSS的项目
ng new my-app --routing --style=scss

# 创建启用严格模式的项目
ng new my-app --strict

# 创建项目并使用yarn
ng new my-app --package-manager=yarn

add - 添加包

向项目中添加功能包。

# 添加Angular Material
ng add @angular/material

# 添加PWA支持
ng add @angular/pwa

# 添加Bootstrap
ng add @ng-bootstrap/ng-bootstrap

# 添加Tailwind CSS
ng add @ngneat/tailwind

update - 更新Angular

更新项目到最新版本。

# 检查可更新包
ng update

# 更新Angular核心包
ng update @angular/core @angular/cli

# 更新所有包
ng update --all

# 从特定版本迁移
ng update @angular/cli@13 @angular/core@13

generate - 生成代码 (别名: g)

使用原理图生成代码文件。

# 生成带路由的模块
ng g module admin --routing

# 生成组件到特定路径
ng g component admin/dashboard --path=app/admin

# 生成服务并提供到根
ng g service auth --providedIn=root

# 生成带内联模板和样式的组件
ng g component inline-comp --inline-template --inline-style

# 生成接口并导出类型
ng g interface models/user --type=model

serve - 启动开发服务器 (别名: s)

启动开发服务器并实时重新加载。

# 基本启动
ng serve

# 指定端口和主机
ng serve --port 4300 --host 0.0.0.0

# 自动打开浏览器
ng serve --open

# 使用HTTPS
ng serve --ssl

# 使用生产配置（用于测试生产构建）
ng serve --prod

# 禁用实时重载
ng serve --live-reload=false

build - 构建项目 (别名: b)

编译应用到输出目录（默认dist/）。

# 开发构建
ng build

# 生产构建
ng build --prod

# 指定输出路径
ng build --output-path=dist/production

# 自定义基地址
ng build --base-href=/my-app/

# 生成构建分析文件
ng build --stats-json

# 监视模式构建
ng build --watch

deploy - 部署项目

通过Angular CLI部署项目到各种平台。

# 部署到Firebase（需先配置）
ng deploy

# 部署到GitHub Pages
ng deploy --base-href=/repository-name/

# 部署到Azure
ng deploy --configuration=production

# 部署前构建
ng deploy --preview

test - 运行测试 (别名: t)

运行单元测试。

# 基本测试（监视模式）
ng test

# 生成代码覆盖率
ng test --code-coverage

# 运行一次测试（CI/CD场景）
ng test --watch=false --browsers=ChromeHeadless

# 包含特定测试
ng test --include='**/auth/*.spec.ts'

# 使用不同报告器
ng test --reporters=junit,html

e2e - 端到端测试

运行端到端测试。

# 运行E2E测试
ng e2e

# 使用特定配置
ng e2e --configuration=production

# 指定浏览器
ng e2e --browser=firefox

# 运行特定测试套件
ng e2e --suite=smoke

lint - 代码检查

运行代码检查工具。

# 运行lint检查
ng lint

# 自动修复问题
ng lint --fix

# 输出JSON格式
ng lint --format=json

# 检查特定项目
ng lint my-project

format - 代码格式化

格式化代码文件。

# 格式化所有文件
ng format

# 格式化特定文件
ng format src/app/app.component.ts

# 格式化目录
ng format src/app/components/

多项目工作区命令

# 查看所有项目
ng list

# 生成新应用
ng generate application admin-app

# 生成库
ng generate library shared

# 构建特定应用
ng build admin-app --prod

# 构建库
ng build shared

angular.json 配置示例

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production"
            },
            "staging": {
              "browserTarget": "my-app:build:staging"
            }
          }
        }
      }
    }
  }
}