Angular CLI Essential Commands: The Practical Cheat Sheet

Installation & Basics

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

# Check version
ng version

# Get help
ng help
ng help [command]

# Enable/disable analytics
ng analytics on|off

Project Creation

# Create new project (interactive)
ng new

# Create new project (basic)
ng new my-app

# Create with routing 
ng new my-app --routing

# Create with specific style format
ng new my-app --style scss
# Options: css, scss, sass, less

# Create without installing dependencies
ng new my-app --skip-install

# Create with minimal template (no tests)
ng new my-app --minimal

# Create with specific Angular version
ng new my-app --version 16.0.0

# Create with specific package manager
ng new my-app --package-manager npm|yarn|pnpm

Development Server

# Start development server
ng serve

# Start and open browser
ng serve --open
ng serve -o

# Use specific port
ng serve --port 4201

# Use specific host
ng serve --host 0.0.0.0

# Use with proxy configuration
ng serve --proxy-config proxy.conf.json

# Serve with production configuration
ng serve --configuration production

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

# Enable source maps
ng serve --source-map

Generating Code

Common Generators

# Component
ng generate component my-component
ng g c my-component

# Service
ng generate service my-service
ng g s my-service

# Module
ng generate module my-module
ng g m my-module

# Module with routing
ng g m my-module --routing

# Directive
ng g directive my-directive
ng g d my-directive

# Pipe
ng g pipe my-pipe
ng g p my-pipe

# Class
ng g class my-class

# Interface
ng g interface my-interface

# Enum
ng g enum my-enum

# Guard
ng g guard my-guard

# Resolver
ng g resolver my-resolver

# Web Worker
ng g web-worker my-worker

# Library (in workspace)
ng g library my-lib

Component Options

# Component without tests
ng g c my-component --skip-tests

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

# Component with inline template
ng g c my-component --inline-template
ng g c my-component -t

# Component with inline styles
ng g c my-component --inline-style
ng g c my-component -s

# Component with custom path
ng g c features/user/profile

# Generate in dry-run mode (no changes)
ng g c my-component --dry-run
ng g c my-component -d

Building

# Development build
ng build

# Production build
ng build --configuration production

# Build with custom output path
ng build --output-path dist/custom

# Build with base href
ng build --base-href /my-app/

# Build with source maps
ng build --source-map

# Build with bundle optimization
ng build --optimization

# Build with stats.json (for analysis)
ng build --stats-json

Testing

# Run unit tests
ng test

# Run tests once (no watch)
ng test --watch=false

# Generate code coverage report
ng test --code-coverage

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

# Run end-to-end tests (Cypress or Protractor)
ng e2e

Updating

# Check for available updates
ng update

# Update Angular core and CLI
ng update @angular/cli @angular/core

# Update to specific version
ng update @angular/cli@16 @angular/core@16

# Update other dependencies
ng update @angular/material

# Force update through incompatible peer dependencies
ng update @angular/cli --force

Adding Capabilities

# Add Angular Material
ng add @angular/material

# Add Progressive Web App (PWA) support
ng add @angular/pwa

# Add NgRx store
ng add @ngrx/store

# Add internationalization
ng add @angular/localize

Linting & Format

# Lint project
ng lint

# Lint and fix automatically
ng lint --fix

Workspace Commands

# Generate new app in workspace
ng generate application my-second-app

# Run commands for specific project
ng build my-project
ng serve my-project
ng test my-project

Useful Options

# Dry run (preview changes without executing)
ng g c my-component --dry-run
ng g c my-component -d

# Skip tests
ng g c my-component --skip-tests

# Force overwrite
ng g c my-component --force
ng g c my-component -f

# Verbose output
ng [command] --verbose

Deploy Commands

# Install GitHub Pages deployment
ng add angular-cli-ghpages

# Deploy to GitHub Pages
ng deploy --base-href=/repo-name/

# Install Firebase deployment
ng add @angular/fire

# Deploy to Firebase (after config)
ng deploy

Configuration Files

Environment-Specific Builds

# Create environment files
src/environments/environment.ts
src/environments/environment.prod.ts

# Configure environments in angular.json
"configurations": {
  "production": { ... },
  "staging": { ... }
}

# Build with specific environment
ng build --configuration staging

Common Issues & Solutions

Angular CLI Version Compatibility

Essential npm Scripts

Common npm scripts found 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"
  }
}

Resources

• Angular CLI Documentation
• Angular Update Guide
• Angular CLI GitHub