Angular CLI Cheat Sheet: The Complete Command Reference

Introduction

The Angular Command Line Interface (CLI) is a powerful tool that simplifies Angular application development. It provides commands for creating projects, generating code, running tests, building for production, and more. This cheat sheet provides a comprehensive reference of Angular CLI commands, options, and best practices.

Installation & Setup

Installing Angular CLI

# Install Angular CLI globally
npm install -g @angular/cli

# Verify installation and check version
ng version
# or
ng v

Updating Angular CLI

# Update global CLI version
npm uninstall -g @angular/cli
npm cache clean --force
npm install -g @angular/cli

# Update local project CLI version
ng update @angular/cli @angular/core

Project Creation & Configuration

Creating a New Project

# Basic project creation
ng new my-app-name

# With routing
ng new my-app-name --routing

# Specify CSS preprocessor
ng new my-app-name --style=scss
# Options: css, scss, sass, less

# Skip installing dependencies
ng new my-app-name --skip-install

# Create minimal project without testing files
ng new my-app-name --minimal

# Inline template and styles
ng new my-app-name --inline-template --inline-style
# Short flags: -t -s

# Skip tests
ng new my-app-name --skip-tests

# Create with specific Angular version
ng new my-app-name --version=13.0.0

# With package manager of choice
ng new my-app-name --package-manager=npm
# Options: npm, yarn, pnpm

# Create project with dry run (simulation)
ng new my-app-name --dry-run
# Short flag: -d

# Create all in one interactive command
ng new

Configuration Files

# Generate a new configuration file
ng generate config [options]

# Modify angular.json file settings
ng config projects.my-app.architect.build.options.outputPath dist/my-custom-folder

Development Server

# Start development server
ng serve

# Open browser automatically
ng serve --open
# Short flag: -o

# Change port (default: 4200)
ng serve --port 4201

# Change host (default: localhost)
ng serve --host 0.0.0.0

# Use a proxy configuration file
ng serve --proxy-config proxy.conf.json

# Serve with a specific configuration
ng serve --configuration=production
# Short flag: -c production

# Serve with specific environment file
ng serve --configuration=staging

# Disable live browser reload
ng serve --live-reload=false

# Serve with source maps
ng serve --source-map

# Serve with optimizations
ng serve --optimization

# Serve with verbose output
ng serve --verbose

Code Generation

Generating Components

# Generate a component
ng generate component my-component
# Shorthand
ng g c my-component

# Generate a component in a specific directory
ng g c features/user/user-profile

# With inline template
ng g c my-component --inline-template
# Short flag: -t

# With inline styles
ng g c my-component --inline-style
# Short flag: -s

# Without test file
ng g c my-component --skip-tests

# With a custom prefix (instead of app-)
ng g c my-component --prefix custom

# With a specific selector style
ng g c my-component --style scss

# Generate a standalone component (Angular 14+)
ng g c my-component --standalone

# Generate using a custom schematic
ng g c my-component --schematic @angular-eslint/schematics

Generating Other Code Elements

# Generate a service
ng generate service my-service
# Shorthand
ng g s my-service

# Generate a module
ng generate module my-module
# Shorthand
ng g m my-module

# Generate a module with routing
ng g m my-module --routing

# Generate a directive
ng generate directive my-directive
# Shorthand
ng g d my-directive

# Generate a pipe
ng generate pipe my-pipe
# Shorthand
ng g p my-pipe

# Generate an interface
ng generate interface my-interface
# Shorthand
ng g i my-interface

# Generate a class
ng generate class my-class
# Shorthand
ng g cl my-class

# Generate an enum
ng generate enum my-enum
# Shorthand
ng g e my-enum

# Generate a guard
ng generate guard my-guard
# Shorthand
ng g g my-guard

# Generate a resolver
ng generate resolver my-resolver
# Shorthand
ng g r my-resolver

# Generate an interceptor
ng generate interceptor my-interceptor
# Shorthand
ng g interceptor my-interceptor

Special Generators

# Generate a feature module with routing
ng g m my-feature --routing

# Generate a library (Angular workspace)
ng generate library my-lib

# Generate a web worker
ng generate web-worker my-worker

# Generate an application (in a workspace)
ng generate application my-second-app

# Generate a service worker
ng generate service-worker

Building & Packaging

Building the Application

# Build for development
ng build

# Build for production
ng build --configuration production
# Short: ng build --prod (deprecated but still works in some versions)

# Build with specific environment
ng build --configuration staging

# Specify the output path
ng build --output-path dist/custom-folder

# Set the base href
ng build --base-href /my-app/

# Build with optimization disabled
ng build --optimization false

# Create source maps for debugging
ng build --source-map

# Build with specific ECMAScript target
ng build --target es2020

# Build with specific bundle budget threshold
ng build --budget-error 1mb --budget-warning 500kb

# Extract CSS into separate files
ng build --extract-css

# Output stats.json file (for bundle analysis)
ng build --stats-json

Packaging

# Build a library
ng build my-lib

# Package a library
ng package

# Build and publish a library
ng build my-lib && cd dist/my-lib && npm publish

Testing

Running Tests

# Run all unit tests
ng test

# Run tests once (don't watch for changes)
ng test --watch=false

# Run tests with code coverage report
ng test --code-coverage

# Run tests for a specific project (in a workspace)
ng test my-project

# Run tests with a specific browser
ng test --browsers=Chrome,Firefox

# Run tests with specific configuration
ng test --configuration=testing

# Run tests with specific Karma config file
ng test --karma-config=karma.custom.conf.js

End-to-End Testing with Cypress

# Install Cypress
ng add @cypress/schematic

# Run Cypress tests
ng e2e

End-to-End Testing with Protractor (Legacy)

# Run e2e tests
ng e2e

# Run e2e tests with a specific browser
ng e2e --protractor-config=e2e/protractor.custom.conf.js

# Run e2e tests without rebuilding the app
ng e2e --dev-server-target=

Dependency Management

Adding Packages

# Add Angular Material
ng add @angular/material

# Add Angular PWA
ng add @angular/pwa

# Add other libraries to your project
ng add @ng-bootstrap/ng-bootstrap
ng add @ngrx/store

Updating Dependencies

# Check for updates
ng update

# Update core Angular packages
ng update @angular/core @angular/cli

# Update Angular to a specific version
ng update @angular/core@13 @angular/cli@13

# Update specific package
ng update @angular/material

# Update with automatic migration scripts
ng update @angular/core --migrate-only

# Update all packages that can be updated
ng update --all

Workspace Management

Working with Workspaces (Monorepo)

# Generate a new workspace
ng new my-workspace --create-application=false

# Generate an application inside a workspace
ng generate application my-app

# Generate a library inside a workspace
ng generate library my-lib

# Run a specific project
ng serve my-app

# Build a specific project
ng build my-app

# Test a specific project
ng test my-lib

Linting & Code Quality

Linting

# Lint your project
ng lint

# Lint a specific project in a workspace
ng lint my-app

# Lint with autofix
ng lint --fix

# Configure linting rules
ng config schematics.@angular-eslint/schematics:application.lintConfig.rules.quotes [2, "single"]

Analysis & Debugging

Analyzing Bundles

# Generate bundle stats
ng build --stats-json

# Analyze bundle with webpack-bundle-analyzer
npx webpack-bundle-analyzer dist/my-app/stats.json

Common Debugging Commands

# Verbose output for debugging
ng <command> --verbose

# Dry run (simulate without making changes)
ng <command> --dry-run
# Short flag: -d

# Force overwrite
ng <command> --force
# Short flag: -f

Deployment Helpers

# Generate deployment configuration for Firebase
ng add @angular/fire

# Deploy to Firebase (after configuration)
ng deploy

# Deploy to GitHub Pages
ng add angular-cli-ghpages
ng deploy --base-href=/my-repo/

Schematics

# List available schematics
ng generate --list

# List available schematics for a collection
ng generate --collection=@angular/material

# Generate using a custom schematic
ng generate @angular/material:table my-table

Customizing Angular CLI

Using Configuration Files

# angular.json - Main configuration file
# .browserslistrc - Target browsers configuration
# tsconfig.json - TypeScript configuration
# .editorconfig - Editor configuration

Using npm Scripts

Common npm scripts in package.json:

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
}

Tips & Tricks

CLI Tab Completion

# For bash
ng completion script > ~/.ng_completion
echo 'source ~/.ng_completion' >> ~/.bashrc

# For zsh
ng completion script > ~/.zshrc

CLI Command Help

# Show general help
ng help

# Show help for a specific command
ng help generate
ng help build

Angular CLI Configuration

# Set default collection
ng config cli.defaultCollection @angular/material

# Set package manager
ng config cli.packageManager yarn

# Set analytics settings
ng config cli.analytics false

Common Issues & Solutions

CLI Version Compatibility

Resources

• Angular CLI Documentation
• Angular CLI GitHub Repository
• Angular CLI Wiki
• Angular Update Guide