Skip to main content

​
What is Angular CLI?

Angular CLI (Command Line Interface) is the official tool for initializing, developing, scaffolding, and maintaining Angular applications. It provides a powerful set of commands that streamline the entire development workflow, from project creation to production deployment.
Angular CLI Version: The current Angular framework version is 22.0.0-next.0, using CLI version 21.2.0-rc.2

​
Why Use Angular CLI?

Angular CLI offers several key advantages:

Rapid Development

Generate components, services, and modules with a single command

Best Practices

Enforces Angular coding standards and project structure

Build Optimization

Production builds with tree-shaking, minification, and bundling

Developer Experience

Hot reload, live development server, and testing tools

​
Installation

Install Angular CLI globally using your preferred package manager: 
npm install -g @angular/cli
The Angular team recommends using pnpm as the package manager. The source repository uses pnpm version 10.30.3.

​
Verify Installation

Check that Angular CLI is installed correctly: 
ng version
This displays the Angular CLI version along with Node.js and package manager information.

​
Core Features

​
Project Generation

Create a new Angular workspace with a complete project structure: 
ng new my-angular-app
The CLI will prompt you to configure:
  • Routing: Add Angular Router for navigation
  • Stylesheet format: CSS, SCSS, Sass, Less, or Stylus
  • SSR: Server-side rendering support

​
Development Server

Start a live development server with hot reload: 
ng serve
  • --port: Specify custom port (default: 4200)
  • --open: Automatically open browser
  • --configuration: Use specific build configuration
  • --host: Specify host address

​
Code Generation

Generate Angular artifacts using schematics: 
ng generate component my-component
ng generate service my-service
ng generate module my-module
Use the shorthand ng g instead of ng generate for faster typing.

​
Building for Production

Create an optimized production build: 
ng build
Production builds include:
  • Ahead-of-Time (AOT) compilation
  • Tree-shaking to remove unused code
  • Minification and uglification
  • Bundle optimization
  • Source maps generation (optional)

​
Testing

Run unit tests with Karma and Jasmine: 
ng test
Angular CLI provides pre-configured testing setup with:
  • Karma: Test runner
  • Jasmine: Testing framework
  • Code coverage reporting
  • Watch mode for development

​
Project Structure

Angular CLI generates a standardized project structure: 
my-angular-app/
├── src/
│   ├── app/              # Application components
│   ├── assets/           # Static assets
│   ├── index.html        # Main HTML file
│   ├── main.ts          # Application entry point
│   └── styles.css       # Global styles
├── angular.json         # CLI configuration
├── package.json         # Dependencies
├── tsconfig.json        # TypeScript configuration
└── tsconfig.app.json    # App-specific TypeScript config

​
Build System

Angular CLI uses modern build tools:
The new application builder (v17+) uses esbuild and Vite for faster builds:
"architect": {
  "build": {
    "builder": "@angular/build:application"
  }
}

​
Configuration Files

​
angular.json

The workspace configuration file that defines:
  • Project structure and metadata
  • Build configurations (development, production)
  • Architect targets (build, serve, test)
  • File replacements and assets
  • Style preprocessor options
The configuration follows the schema at:
@angular/cli/lib/config/schema.json
Key sections:
  • version: Configuration schema version
  • newProjectRoot: Directory for new projects
  • projects: Project-specific configurations
  • cli: CLI-wide settings (cache, analytics)

​
Package Manager Configuration

Angular CLI respects the packageManager field in package.json: 
{
  "packageManager": "pnpm@10.30.3"
}

​
CLI Analytics

Angular CLI can collect anonymous usage data to improve the tool: 
# Enable analytics
ng analytics on

# Disable analytics
ng analytics off

# Check status
ng analytics info
Disable in angular.json: 
"cli": {
  "analytics": false
}

​
CLI Cache

Enable build caching for faster subsequent builds: 
"cli": {
  "cache": {
    "enabled": true
  }
}
In CI/CD environments, you may want to disable caching to ensure reproducible builds.

​
Workspace Concepts

​
Single Project Workspace

Default setup with one application: 
ng new my-app

​
Multi-Project Workspace

Host multiple applications and libraries: 
ng new my-workspace --create-application=false
ng generate application app1
ng generate library shared-lib

​
Next Steps

CLI Commands

Explore all available Angular CLI commands

Builders

Learn about custom build processes

Schematics

Create custom code generators

Configuration

Deep dive into angular.json configuration

​
Resources

Official CLI Docs

Complete CLI documentation

GitHub Repository

CLI source code and issues