The Angular CLI
The Angular CLI (Command Line Interface) is the primary tool for creating, developing, testing, and building Angular applications. It wraps a large amount of build, bundling, and tooling complexity behind a small set of ng subcommands, and it uses 'schematics' — code generation blueprints — to scaffold new components, services, directives, pipes, and more in a way that automatically follows Angular's naming and structural conventions.
Cricket analogy: The Angular CLI is like a franchise's full support staff condensed into a few instructions to the captain — handling pitch prep, kit logistics, and net scheduling behind the scenes — and its schematics are like standardized drill templates that scaffold a new fielding-practice session following the team's established conventions automatically.
Core Commands
The commands developers use daily include ng serve (start a dev server with live reload), ng build (produce an optimized production bundle), ng test (run unit tests, by default with Karma/Jasmine), ng lint (run configured linters), and ng generate (scaffold new artifacts using schematics). ng generate has shorthand aliases for common artifact types, such as ng g c for component or ng g s for service, which is why experienced Angular developers rarely write boilerplate files by hand.
Cricket analogy: ng serve is like a live net-practice session with instant feedback on each shot; ng build produces the polished matchday squad; ng test is the fitness lab's testing battery; ng lint is the equipment inspector checking every bat meets regulation; and ng generate's shorthand ng g c for a new player draft is why experienced scouts rarely fill out paperwork by hand.
// Generate a new standalone component into the orders/ feature folder
// ng generate component orders/order-list --standalone
// shorthand: ng g c orders/order-list
// Generate a new injectable service
// ng g s orders/order
// Run the dev server on a custom port
// ng serve --port 4300
// Produce a production build with source maps disabled
// ng build --configuration productionSchematics and Updates
Schematics are not limited to generating new files — ng update uses schematics to automatically migrate a project's source code when upgrading Angular versions, rewriting deprecated APIs and configuration where possible. This is a significant part of why Angular major-version upgrades are usually far less painful than they might otherwise be: the CLI can programmatically apply many of the required code changes rather than leaving developers to hunt through changelogs. Third-party libraries can also ship their own schematics (e.g., Angular Material's ng add @angular/material), which both installs the package and wires up any necessary configuration automatically.
Cricket analogy: ng update is like a league-wide rule change (say, new ball-tampering regulations) automatically rewriting every team's standard operating procedure rather than each captain individually re-reading the rulebook; a third-party schematic like Angular Material's ng add is like a bat manufacturer providing pre-certified equipment that's automatically registered with the umpires the moment it's unboxed.
ng add is distinct from a plain npm install: it installs a package and then runs that package's install schematic, which can modify angular.json, add imports, or scaffold starter configuration — something a raw npm install could never do.
Running ng generate from the wrong working directory (e.g., outside the app's src/app tree) can place generated files in an unintended location. Always check the reported output path in the CLI's log after generating a file, especially in workspace setups with multiple projects.
- The Angular CLI provides
ng serve,ng build,ng test,ng lint, andng generateas its core day-to-day commands. ng generate(aliasedng g) uses schematics to scaffold components, services, directives, and pipes following Angular conventions.ng updateapplies code migration schematics automatically when upgrading Angular major versions.ng addinstalls a package and runs its schematic to wire up configuration, unlike a plain npm install.- Shorthand aliases (e.g.,
ng g c,ng g s) speed up common generation tasks. - The CLI keeps build tooling complexity out of individual projects, centralizing it in versioned CLI packages.
Practice what you learned
1. What CLI command scaffolds new components, services, or other artifacts using conventions-following blueprints?
2. What makes `ng add` different from a plain `npm install`?
3. What is the primary purpose of `ng update`?
4. Which shorthand generates a new component via the CLI?
5. Which command produces an optimized bundle intended for deployment?
Was this page helpful?
You May Also Like
Setting Up an Angular Project
A practical walkthrough of installing the Angular CLI, scaffolding a new project, and understanding the initial choices the CLI asks you to make.
Angular Project Structure
A guided tour of the files and folders the Angular CLI generates, and the conventions that keep large Angular codebases navigable.
What Is Angular?
An overview of Angular as a full-featured, opinionated TypeScript framework for building web applications, and how it compares to lighter-weight libraries.
Building and Deploying an Angular App
Learn how ng build produces an optimized production bundle, what build configurations and budgets control, and common strategies for deploying an Angular app to a live environment.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics