> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/angular/angular/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular CLI Overview

> Complete guide to Angular CLI - the official command-line interface for Angular application development

## 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.

<Info>
  **Angular CLI Version**: The current Angular framework version is 22.0.0-next.0, using CLI version 21.2.0-rc.2
</Info>

## Why Use Angular CLI?

Angular CLI offers several key advantages:

<CardGroup cols={2}>
  <Card title="Rapid Development" icon="rocket">
    Generate components, services, and modules with a single command
  </Card>

  <Card title="Best Practices" icon="badge-check">
    Enforces Angular coding standards and project structure
  </Card>

  <Card title="Build Optimization" icon="bolt">
    Production builds with tree-shaking, minification, and bundling
  </Card>

  <Card title="Developer Experience" icon="code">
    Hot reload, live development server, and testing tools
  </Card>
</CardGroup>

## Installation

Install Angular CLI globally using your preferred package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install -g @angular/cli
  ```

  ```bash pnpm theme={null}
  pnpm add -g @angular/cli
  ```

  ```bash yarn theme={null}
  yarn global add @angular/cli
  ```
</CodeGroup>

<Note>
  The Angular team recommends using **pnpm** as the package manager. The source repository uses pnpm version 10.30.3.
</Note>

### Verify Installation

Check that Angular CLI is installed correctly:

```bash theme={null}
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:

```bash theme={null}
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:

```bash theme={null}
ng serve
```

<Accordion title="Development Server Options">
  * `--port`: Specify custom port (default: 4200)
  * `--open`: Automatically open browser
  * `--configuration`: Use specific build configuration
  * `--host`: Specify host address
</Accordion>

### Code Generation

Generate Angular artifacts using schematics:

```bash theme={null}
ng generate component my-component
ng generate service my-service
ng generate module my-module
```

<Tip>
  Use the shorthand `ng g` instead of `ng generate` for faster typing.
</Tip>

### Building for Production

Create an optimized production build:

```bash theme={null}
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:

```bash theme={null}
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:

<Tabs>
  <Tab title="@angular/build">
    The new application builder (v17+) uses esbuild and Vite for faster builds:

    ```json theme={null}
    "architect": {
      "build": {
        "builder": "@angular/build:application"
      }
    }
    ```
  </Tab>

  <Tab title="@angular-devkit/build-angular">
    The traditional builder using webpack:

    ```json theme={null}
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser"
      }
    }
    ```
  </Tab>
</Tabs>

## 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

<Accordion title="angular.json Schema">
  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)
</Accordion>

### Package Manager Configuration

Angular CLI respects the `packageManager` field in package.json:

```json theme={null}
{
  "packageManager": "pnpm@10.30.3"
}
```

## CLI Analytics

Angular CLI can collect anonymous usage data to improve the tool:

```bash theme={null}
# Enable analytics
ng analytics on

# Disable analytics
ng analytics off

# Check status
ng analytics info
```

Disable in angular.json:

```json theme={null}
"cli": {
  "analytics": false
}
```

## CLI Cache

Enable build caching for faster subsequent builds:

```json theme={null}
"cli": {
  "cache": {
    "enabled": true
  }
}
```

<Warning>
  In CI/CD environments, you may want to disable caching to ensure reproducible builds.
</Warning>

## Workspace Concepts

### Single Project Workspace

Default setup with one application:

```bash theme={null}
ng new my-app
```

### Multi-Project Workspace

Host multiple applications and libraries:

```bash theme={null}
ng new my-workspace --create-application=false
ng generate application app1
ng generate library shared-lib
```

## Next Steps

<CardGroup cols={2}>
  <Card title="CLI Commands" icon="terminal" href="/cli/commands">
    Explore all available Angular CLI commands
  </Card>

  <Card title="Builders" icon="hammer" href="/cli/builders">
    Learn about custom build processes
  </Card>

  <Card title="Schematics" icon="wand-magic-sparkles" href="/cli/schematics">
    Create custom code generators
  </Card>

  <Card title="Configuration" icon="gear" href="/cli/configuration">
    Deep dive into angular.json configuration
  </Card>
</CardGroup>

## Resources

<CardGroup cols={2}>
  <Card title="Official CLI Docs" icon="book" href="https://angular.dev/tools/cli">
    Complete CLI documentation
  </Card>

  <Card title="GitHub Repository" icon="github" href="https://github.com/angular/angular-cli">
    CLI source code and issues
  </Card>
</CardGroup>