Angular Tooling

Use Angular CLI and development tools for efficient Angular v20+ development.

Project Setup Create New Project

Create new standalone project (default in v20+)

ng new my-app

With specific options

ng new my-app --style=scss --routing --ssr=false

Skip tests

ng new my-app --skip-tests

Minimal setup

ng new my-app --minimal --inline-style --inline-template

Project Structure my-app/ ├── src/ │ ├── app/ │ │ ├── app.component.ts │ │ ├── app.config.ts │ │ └── app.routes.ts │ ├── index.html │ ├── main.ts │ └── styles.scss ├── public/ # Static assets ├── angular.json # CLI configuration ├── package.json ├── tsconfig.json └── tsconfig.app.json

Code Generation Components

Generate component

ng generate component features/user-profile ng g c features/user-profile # Short form

With options

ng g c shared/button --inline-template --inline-style ng g c features/dashboard --skip-tests ng g c features/settings --change-detection=OnPush

Flat (no folder)

ng g c shared/icon --flat

Dry run (preview)

ng g c features/checkout --dry-run

Services

Generate service (providedIn: 'root' by default)

ng g service services/auth ng g s services/user

Skip tests

ng g s services/api --skip-tests

Other Schematics

Directive

ng g directive directives/highlight ng g d directives/tooltip

Pipe

ng g pipe pipes/truncate ng g p pipes/date-format

Guard (functional by default)

ng g guard guards/auth

Interceptor (functional by default)

ng g interceptor interceptors/auth

Interface

ng g interface models/user

Enum

ng g enum models/status

Class

ng g class models/product

Generate with Path Alias

Components in feature folders

ng g c @features/products/product-list ng g c @shared/ui/button

Development Server

Start dev server

ng serve ng s # Short form

With options

ng serve --port 4201 ng serve --open # Open browser ng serve --host 0.0.0.0 # Expose to network

Production mode locally

ng serve --configuration=production

With SSL

ng serve --ssl --ssl-key ./ssl/key.pem --ssl-cert ./ssl/cert.pem

Building Development Build ng build

Production Build ng build --configuration=production ng build -c production # Short form

With specific options

ng build -c production --source-map=false ng build -c production --named-chunks

Build Output dist/my-app/ ├── browser/ │ ├── index.html │ ├── main-[hash].js │ ├── polyfills-[hash].js │ └── styles-[hash].css └── server/ # If SSR enabled └── main.js

Testing Unit Tests

Run tests

ng test ng t # Short form

Single run (CI)

ng test --watch=false --browsers=ChromeHeadless

With coverage

ng test --code-coverage

Specific file

ng test --include=**/user.service.spec.ts

E2E Tests

Run e2e (if configured)

ng e2e

Linting

Run linter

ng lint

Fix auto-fixable issues

ng lint --fix

Configuration angular.json Key Sections { "projects": { "my-app": { "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/my-app", "index": "src/index.html", "browser": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "assets": ["{ \"glob\": \"*/\", \"input\": \"public\" }"], "styles": ["src/styles.scss"], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } } } } } } }

Environment Configuration // src/environments/environment.ts export const environment = { production: false, apiUrl: 'http://localhost:3000/api', };

// src/environments/environment.prod.ts export const environment = { production: true, apiUrl: 'https://api.example.com', };

Configure in angular.json:

{ "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] } } }

Adding Libraries Angular Libraries

Add Angular Material

ng add @angular/material

Add Angular PWA

ng add @angular/pwa

Add Angular SSR

ng add @angular/ssr

Add Angular Localize

ng add @angular/localize

Third-Party Libraries

Install and configure

npm install @ngrx/signals

Some libraries have schematics

ng add @ngrx/store

Update Angular

Check for updates

ng update

Update Angular core and CLI

ng update @angular/core @angular/cli

Update all packages

ng update --all

Force update (skip peer dependency checks)

ng update @angular/core @angular/cli --force

Performance Analysis

Build with stats

ng build -c production --stats-json

Analyze bundle (install webpack-bundle-analyzer)

npx webpack-bundle-analyzer dist/my-app/browser/stats.json

Caching

Enable persistent build cache (default in v20+)

Configured in angular.json:

{ "cli": { "cache": { "enabled": true, "path": ".angular/cache", "environment": "all" } } }

Clear cache

rm -rf .angular/cache

For advanced configuration, see references/tooling-patterns.md.