Angular CLI

The Angular CLI is the backbone of everyday Angular development: it generates code, runs a dev server, builds for production, and runs tests. This lesson covers the commands you will use most often.

What Is the Angular CLI?

The Angular CLI (@angular/cli) is an official command-line tool that automates common Angular workflows: scaffolding new projects, generating components and services with correct file naming, running a development server, building optimized production bundles, and running tests.

Instead of manually configuring a bundler and writing boilerplate files by hand, the CLI centralizes all of this behind simple, memorable commands, most of which start with ng.

ng generate component user-card
# creates:
#  user-card.component.ts
#  user-card.component.html
#  user-card.component.css
#  user-card.component.spec.ts

The CLI creates a matching unit test file (.spec.ts) alongside every generated component, service, or pipe.

The `ng generate` Command Family

ng generate <schematic> <name> [options]
ng g <schematic> <name> [options]   # shorthand

<schematic> is the type of artifact: component, service, pipe, directive, guard, interceptor, and more.
<name> becomes the file and class name, converted to the correct casing automatically.
Common flags include --standalone, --skip-tests, and --dry-run to preview without writing files.
ng g is the widely used shorthand for ng generate.

Angular CLI Command Cheatsheet

The commands you will reach for constantly while building an Angular app.

Command	Purpose
`ng new app-name`	Scaffold a new project
`ng serve`	Run the dev server with hot reload
`ng generate component name`	Create a new component
`ng generate service name`	Create a new service
`ng generate pipe name`	Create a new pipe
`ng generate guard name`	Create a new route guard
`ng build`	Build the app for production
`ng test`	Run unit tests
`ng lint`	Run configured linters
`ng add <package>`	Install and configure a library (e.g. `@angular/material`)

Generating Building Blocks

Almost every Angular building block has a matching CLI schematic. This keeps naming, folder structure, and boilerplate consistent across a whole team, regardless of who writes the code.

ng g component features/orders/order-list
ng g service core/services/order
ng g directive shared/directives/highlight
ng g pipe shared/pipes/currency-format
ng g guard core/guards/auth --functional

Passing a path before the name (like features/orders/order-list) places generated files in that folder.

`ng add` and Third-Party Schematics

ng add installs an npm package and runs its setup schematic automatically, wiring up configuration that would otherwise require manual edits across several files.

ng add @angular/material installs Angular Material and configures theming.
ng add @angular/pwa adds a service worker and manifest for Progressive Web App support.
ng add @angular/localize sets up internationalization tooling.
Many third-party libraries ship their own schematics compatible with ng add.

Configuring Builds With `angular.json`

angular.json is the workspace configuration file the CLI reads to know how to build, serve, and test each project, including build budgets, asset paths, and style/script entry points.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "browser": "src/main.ts"
          }
        }
      }
    }
  }
}

Common Mistakes

Manually writing files that a CLI schematic already generates correctly, leading to naming or structure drift.
Ignoring --dry-run when unsure what a generate command will produce.
Editing compiled output in dist/ directly instead of source files.
Not committing angular.json changes after running ng add, breaking builds for teammates.

Key Takeaways

The Angular CLI automates project creation, code generation, builds, and testing.
ng generate (or ng g) creates components, services, pipes, guards, and more with correct conventions.
ng add installs and configures third-party libraries automatically.
angular.json centralizes build, serve, and test configuration for the whole workspace.

Pro Tip

Use ng g c my-component --dry-run before generating anything you're unsure about; it prints exactly which files would be created or modified without touching your filesystem.