Chapter 1.5☕ 16 min read

Angular CLI Commands

The Angular CLI is your best friend. Master these commands and work 10x faster.

01ng generate — The Magic Command

The Angular CLI (ng) is a command-line tool that automates many development tasks. The most powerful command is ng generate (shortcut: ng g).

# Generate a component (shortcut: ng g c)
ng g c hello
ng generate component hello  # Same thing, longer form

What ng generate can create:

ng g c name — Component (most common)
ng g s name — Service
ng g p name — Pipe
ng g g name — Guard
ng g d name — Directive
ng g m name — Module (rarely needed with standalone)
ng g i name — Interface
ng g cl name — Class
ng g e name — Enum

Hyderabad Tip: CLI = assistant — bole toh component bana de, service bana de. Jaise chai hotel mein "Ek chai" bolte ho, waise terminal mein "ng g c hello" bolo!

02Component Generation Options

The ng g c command has many options to customize what gets generated. Let's explore them:

# Basic component generation
ng g c components/hello
# Creates: components/hello/hello.component.ts
#         components/hello/hello.component.html
#         components/hello/hello.component.scss
#         components/hello/hello.component.spec.ts

# No separate folder (flat)
ng g c components/hello --flat
# Creates files directly in components/ without a subfolder

# Skip test file
ng g c hello --skip-tests
# No .spec.ts file (useful for quick prototypes)

# Inline template (no separate .html file)
ng g c hello --inline-template
# Template is in the .ts file using template property

# Inline style (no separate .scss file)
ng g c hello --inline-style
# Styles are in the .ts file using styles array

# Shortcut: ng g c = ng generate component, dono same hai!

Pro tip: If you're creating a component and you know you won't need unit tests for it, add --skip-tests. You can always add tests later. For production components, always include tests.

03Service, Pipe, Guard Generation

CLI can generate more than just components. Let's explore other generators:

# Generate a service
ng g s services/biryani
# Creates: services/biryani.service.ts
# Services are injectable classes that hold shared logic

# Generate a pipe
ng g p pipes/currency-format
# Creates: pipes/currency-format.pipe.ts
# Pipes transform data in templates (date, currency, etc.)

# Generate a guard
ng g g guards/auth
# Creates: guards/auth.guard.ts
# Guards protect routes from unauthorized access

# Generate a directive
ng g d directives/highlight
# Creates: directives/highlight.directive.ts
# Directives add behavior to existing elements

# Generate an interface
ng g i models/user
# Creates: models/user.ts
# Interfaces define the shape of data (TypeScript only)

Each generator creates the correct file with the right decorator and boilerplate code. You just fill in the logic!

04Build and Serve Commands

Two of the most important commands you'll use daily:

ng serve — Development Server

# Start dev server (default port 4200)
ng serve

# Open browser automatically
ng serve --open    # or: ng serve -o

# Custom port
ng serve --port 4300

# No browser open, just start server
ng serve --no-open

ng build — Production Build

# Development build (larger files, includes sourcemaps)
ng build

# Production build (optimized, minified, smaller)
ng build --configuration production

# Watch mode (rebuild on changes)
ng build --watch

Key difference: ng serve is like cooking in a test kitchen — quick iterations, hot reload, no need to optimize. ng build --configuration production is like packaging biryani for delivery — optimized, minified, and ready for customers.

05Other Useful Commands

Here are other useful CLI commands every Angular developer should know:

# Check Angular version
ng version
# Shows Angular CLI, Angular Core, TypeScript, and RxJS versions

# Update Angular to latest version
ng update @angular/core @angular/cli
# Updates Angular packages to the latest compatible version

# Run linter (code quality check)
ng lint
# Checks your code for style and quality issues

# Run unit tests
ng test
# Opens Karma test runner and runs all .spec.ts files

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

# Check if there's a new Angular CLI version
ng version
# Shows current version and whether an update is available

# Toggle analytics
ng analytics
g ng analytics off  # Turn off analytics collection

Pro tip: Run ng --help anytime to see all available commands. The CLI has extensive built-in documentation.

Key Takeaways

✅ ng g c = ng generate component — creates component with all files
✅ Use --flat, --skip-tests, --inline-template, --inline-style to customize
✅ ng serve = development server with hot reload
✅ ng build --configuration production = optimized production build
✅ ng version, ng update, ng lint, ng test, ng e2e are other essential commands

Previous1.4 — First Component — Hello Hyderabad 📋 All Chapters Next Chapter1.6 — Angular vs React vs Vue →