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 esbuild-visualizer)
npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open
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.