Angular CLI Commands

The Angular CLI (ng) is the command-line tool that drives almost every day-to-day Angular task: scaffolding code, running a dev server, producing optimized production bundles, executing tests, and adding third-party libraries. Learning a handful of core commands and their most useful flags removes a huge amount of boilerplate and keeps your project consistent with Angular conventions. This page covers the five commands you’ll reach for constantly — ng generate, ng serve, ng build, ng test, and ng add — along with the flags worth memorizing for modern, standalone-first Angular development.

ng generate

ng generate (aliased as ng g) scaffolds new code — components, services, directives, guards, and more — wired into your project with the correct file structure and naming. Since Angular 17, standalone components are the default, so you no longer need to declare them in an NgModule.

# Generate a standalone component (the modern default)
ng generate component features/user-profile

# Short alias with explicit flags
ng g c features/user-profile --change-detection OnPush

Output:

CREATE src/app/features/user-profile/user-profile.component.ts (320 bytes)
CREATE src/app/features/user-profile/user-profile.component.html (28 bytes)
CREATE src/app/features/user-profile/user-profile.component.scss (0 bytes)
CREATE src/app/features/user-profile/user-profile.component.spec.ts (598 bytes)

The CLI generates clean, modern code. A freshly scaffolded component uses the standalone API and signal-friendly patterns:

import { Component, ChangeDetectionStrategy, signal } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [],
  templateUrl: './user-profile.component.html',
  styleUrl: './user-profile.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserProfileComponent {
  readonly name = signal('');
}

Other generators follow the same pattern. Functional guards and interceptors are the current recommendation over class-based equivalents:

ng g service core/auth          # AuthService with inject()-ready DI
ng g guard core/auth --functional   # functional CanActivateFn
ng g interceptor core/logging       # functional HttpInterceptorFn
ng g directive shared/highlight
ng g pipe shared/truncate

Flag	Effect
--dry-run (-d)	Show what would be created without writing files
--skip-tests	Omit the .spec.ts file
--flat	Don’t create a containing folder
--change-detection OnPush	Set OnPush change detection on a component
--inline-template / --inline-style	Inline the template/styles into the .ts file

Tip: Run any generator with --dry-run first when you’re unsure about output paths. It prints the full list of files and edits without touching disk, so you can confirm the location before committing.

ng serve

ng serve builds the app in memory and starts a local development server with live reload. Editing a file triggers an incremental rebuild and refreshes the browser automatically.

ng serve --open --port 4300

Output:

Initial chunk files | Names         |  Raw size
main.js             | main          | 221.45 kB
polyfills.js        | polyfills     |  33.71 kB

Application bundle generation complete. [1.842 seconds]

Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4300/

Flag	Purpose
--open (-o)	Open the app in your default browser
--port	Use a specific port instead of 4200
--host	Bind to a host (e.g. 0.0.0.0 to expose on your LAN)
--configuration (-c)	Use a named build configuration
--proxy-config	Point API calls at a backend to avoid CORS in dev

ng build

ng build compiles the application into a deployable bundle in the dist/ folder. By default it uses the production configuration, applying ahead-of-time (AOT) compilation, tree-shaking, minification, and output hashing for cache-busting.

# Production build (default)
ng build

# Build a specific configuration with a stats report
ng build --configuration staging --stats-json

Output:

Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-7QY3K2L9.js      | main          | 198.02 kB |                52.41 kB
styles-A1B2C3D4.css   | styles        |   9.88 kB |                 2.10 kB

Output location: /app/dist/my-app
Application bundle generation complete. [4.317 seconds]

You can tighten quality gates by failing the build when bundles exceed configured size budgets in angular.json. Use --output-path to redirect the build directory and --base-href when the app is served from a subpath.

Warning: ng serve does not produce files on disk — it serves from memory. Never deploy from a dev server. Always run ng build and deploy the contents of dist/.

ng test

ng test runs your unit tests, by default with Karma and Jasmine, in watch mode so tests re-run as you edit. For CI you typically run once in a headless browser.

# Run once, headless, for CI
ng test --watch=false --browsers=ChromeHeadless --code-coverage

Output:

Chrome Headless 124: Executed 24 of 24 SUCCESS (1.203 secs / 1.041 secs)
TOTAL: 24 SUCCESS

=============================== Coverage summary ===============================
Statements   : 91.4% ( 212/232 )
Branches     : 84.6% ( 55/65 )
================================================================================

The --code-coverage flag writes an HTML report to coverage/, and --watch=false ensures the process exits with a proper status code for CI pipelines.

ng add

ng add installs a package and runs its setup schematic, so it does far more than npm install. It adds dependencies, updates angular.json, and modifies your bootstrap code as needed — all in one step.

ng add @angular/material
ng add @angular/pwa
ng add @ngrx/store

Output:

ℹ Using package manager: npm
✔ Found compatible package version: @angular/[email protected]
✔ Package information loaded.
✔ Packages installed successfully.
UPDATE src/app/app.config.ts (412 bytes)
UPDATE angular.json (3201 bytes)
UPDATE src/styles.scss (181 bytes)

Because ng add selects a version compatible with your installed Angular release and applies official configuration, it’s the recommended way to integrate first-party and schematic-aware libraries.

Best Practices

• Use --dry-run to preview any ng generate or ng add operation before it modifies your project.
• Prefer ng add over manual npm install for libraries that ship schematics — it wires up configuration you’d otherwise do by hand.
• Generate functional guards and interceptors (--functional) and OnPush components to match modern Angular patterns.
• Never deploy from ng serve; build with ng build and ship the dist/ output.
• In CI, run ng test --watch=false --browsers=ChromeHeadless so the process exits cleanly with a status code.
• Commit a clean working tree before running schematics so the generated diff is easy to review and revert.
• Learn the short aliases (ng g c, ng g s) to speed up everyday scaffolding.

Related Topics

• Introduction to Angular
• Install the Angular CLI
• Create your first app
• Project structure
• The new application builder