Angular CLI

Since:		Angular 2（2016）

The Angular CLI (Command Line Interface) is a command-line tool for creating, building, testing, and deploying Angular applications. By running ng commands in a terminal, you can streamline the entire development workflow — from project scaffolding and component generation to production builds — without manual configuration. It is installed via npm and used globally or locally within a project.

Main Commands

Command	Overview
`ng new <project-name>`	Creates a new Angular project. Generates the folder structure, configuration files, and initial source code.
`ng serve`	Starts a local development server with live reloading. Accessible at `http://localhost:4200/` by default.
`ng build`	Compiles and bundles the application. Add `--configuration production` for an optimized production build.
`ng generate`	Generates boilerplate files (components, services, pipes, etc.). Abbreviated as `ng g`.
`ng test`	Runs unit tests using Karma (or Jest, depending on configuration).
`ng lint`	Runs static analysis on the code. Requires ESLint or a similar linter to be configured.
`ng add <package>`	Adds a library to the project. Automatically updates configuration and installs dependencies.
`ng update`	Updates Angular and related packages to newer versions.
`ng version`	Displays the versions of Angular CLI and related packages.

Sample Code

Creating a new project and starting the development server.

# Install Angular CLI globally
npm install -g @angular/cli

# Create a new project named my-app
ng new my-app

# Move into the project directory
cd my-app

# Start the development server
ng serve --open

Generating a component, service, and pipe within an existing project.

# Generate a component (creates app/user-card/ directory)
ng generate component user-card

# Abbreviated form
ng g c user-card

# Generate a service
ng g service user

# Generate a pipe
ng g pipe truncate

# Generate a guard
ng g guard auth

Running a production build and checking the output.

# Production build (outputs to dist/ directory)
ng build --configuration production

# Check the output files
ls dist/my-app/

ng generate Subcommands

Subcommand	Alias	Generated Files
`component <name>`	`c`	Component class, template, style, and spec files.
`service <name>`	`s`	Service class and spec file.
`pipe <name>`	`p`	Pipe class and spec file.
`directive <name>`	`d`	Directive class and spec file.
`guard <name>`	`g`	Guard class and spec file.
`module <name>`	`m`	NgModule class.
`interface <name>`	`i`	TypeScript interface file.
`enum <name>`	`e`	TypeScript enum file.
`class <name>`	`cl`	TypeScript class file.

Customizing angular.json

The angular.json file is the central configuration file for an Angular project. It controls build settings, file replacement (such as per-environment configuration), and asset management.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all"
            }
          }
        }
      }
    }
  }
}

Summary

The Angular CLI is an essential tool for Angular development. With ng new you can scaffold a project in seconds, ng serve starts a development server with live reload, and ng build produces an optimized production bundle. The ng generate command reduces boilerplate by creating components, services, pipes, and more in a consistent format.

All CLI settings are centrally managed in angular.json, and per-environment configuration is handled via the fileReplacements mechanism. Once you are comfortable with the basic commands, explore ng add (for library integration) and ng update (for version upgrades) to keep the project up to date.

Common Mistake: Running ng commands outside the project directory

Commands like ng serve and ng generate must be run from inside the Angular project directory (where angular.json exists). Running them from a parent directory causes an error.

# NG: running from outside the project directory
cd ~
ng serve
# Error: Could not find an Angular project

# OK: move into the project directory first
cd my-app
ng serve

Common Mistake: Forgetting --open with ng serve

Running ng serve without --open starts the server but does not open the browser automatically. Add --open (or -o) to open http://localhost:4200/ automatically.

# Without --open: server starts but browser does not open
ng serve

# With --open: browser opens automatically
ng serve --open

Common Mistake: Committing the dist/ directory to git

The dist/ directory contains build artifacts and should not be committed to version control. It is listed in .gitignore by default. Always regenerate it on the server using ng build --configuration production.

# NG: manually adding dist/ to git
git add dist/

# OK: dist/ is already in .gitignore — leave it there
# Regenerate on the server with:
ng build --configuration production

If you find any errors or copyright issues, please contact us.

Home

Angular Dictionary