Angular CLI Essentials: Commands Every Developer Should Know

Why the Angular CLI Is a Game-Changer

The Angular CLI is far more than a project scaffolding tool. It's your build system, code generator, test runner, linter, and deployment helper — all rolled into one consistent interface. Mastering it means less time fighting configuration and more time writing features.

Project Management Commands

ng new

Creates a new Angular workspace and initial application. Key flags you should know:

• --routing — Generates a routing module
• --style=scss — Sets SCSS as the stylesheet format
• --standalone — Scaffolds a standalone component architecture (Angular 17+)
• --skip-tests — Omits spec files (useful for rapid prototyping)

ng new my-app --routing --style=scss

ng serve

Starts the development server with live reload. Useful flags:

• --port 4300 — Run on a different port
• --open — Automatically opens the browser
• --configuration=staging — Serve with a specific environment config

Code Generation with ng generate

The ng generate command (shorthand: ng g) scaffolds Angular building blocks with all the right boilerplate and wiring. It's one of the biggest productivity boosters the CLI offers.

Command	What It Creates
ng g component users/user-card	Component with TS, HTML, CSS, spec file
ng g service core/auth	Injectable service with spec file
ng g module features/dashboard --routing	Feature module with routing
ng g pipe shared/truncate	Custom pipe with spec file
ng g directive shared/highlight	Attribute directive
ng g guard core/auth --implements CanActivate	Route guard
ng g interface models/user	TypeScript interface
ng g enum models/role	TypeScript enum

Pro tip: Use the --dry-run flag to preview what will be generated without actually creating files. Great for verifying paths before committing.

ng g component dashboard/widget --dry-run

Build Commands

ng build

Compiles the application into the dist/ folder. For production:

ng build --configuration=production

The production build enables ahead-of-time (AOT) compilation, tree-shaking, minification, and dead code elimination — significantly reducing bundle size compared to a development build.

ng build with Budget Configuration

Angular's angular.json lets you define bundle size budgets. If your bundle exceeds the limit, the build fails or warns — a great way to enforce performance discipline on teams.

Testing Commands

• ng test — Runs unit tests via Karma and Jasmine (watch mode by default)
• ng test --no-watch --code-coverage — Single run with coverage report
• ng e2e — Runs end-to-end tests (requires a configured e2e tool like Cypress or Playwright)

Code Quality Commands

• ng lint — Runs ESLint across your project
• ng update — Checks for available package updates and applies migrations
• ng add @angular/material — Installs and configures Angular Material (or any ng-add compatible package)

Useful Global Flags

• --help — Shows documentation for any command: ng g component --help
• --verbose — Prints detailed output, helpful for diagnosing build issues
• --skip-tests — Skips spec file generation for ng generate commands

Summary

The Angular CLI abstracts away a tremendous amount of configuration complexity. By investing time in learning its commands deeply — especially ng generate, ng build, and ng update — you'll move faster, maintain consistency, and keep your project healthy over time.