Agent skill
angular-tooling
Use Angular CLI and development tools effectively in Angular v20+ projects. Use for project setup, code generation, building, testing, and configuration. Triggers on creating new projects, generating components/services/modules, configuring builds, running tests, or optimizing production builds. Don't use for Nx workspace commands, custom Webpack configurations, or non-Angular CLI build systems like Vite standalone or esbuild direct usage.
Install this agent skill to your Project
npx add-skill https://github.com/analogjs/angular-skills/tree/main/skills/angular-tooling
SKILL.md
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
analogjs/angular-skills
angular-http
Implement HTTP data fetching in Angular v20+ using resource(), httpResource(), and HttpClient. Use for API calls, data loading with signals, request/response handling, and interceptors. Triggers on data fetching, API integration, loading states, error handling, or converting Observable-based HTTP to signal-based patterns.
analogjs/angular-skills
angular-routing
Implement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards, implementing lazy loading, or reading route parameters with signals.
analogjs/angular-skills
angular-testing
Write unit and integration tests for Angular v20+ applications using Vitest or Jasmine with TestBed and modern testing patterns. Use for testing components with signals, OnPush change detection, services with inject(), and HTTP interactions. Triggers on test creation, testing signal-based components, mocking dependencies, or setting up test infrastructure. Don't use for E2E testing with Cypress or Playwright, or for testing non-Angular JavaScript/TypeScript code.
analogjs/angular-skills
angular-forms
Build signal-based forms in Angular v21+ using the new Signal Forms API. Use for form creation with automatic two-way binding, schema-based validation, field state management, and dynamic forms. Triggers on form implementation, adding validation, creating multi-step forms, or building forms with conditional fields. Signal Forms are experimental but recommended for new Angular projects. Don't use for template-driven forms without signals or third-party form libraries like Formly or ngx-formly.
analogjs/angular-skills
angular-signals
Implement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state with linkedSignal(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject/Observable patterns to signals, or implementing reactive data flows.
analogjs/angular-skills
angular-ssr
Implement server-side rendering and hydration in Angular v20+ using @angular/ssr. Use for SSR setup, hydration strategies, prerendering static pages, and handling browser-only APIs. Triggers on SSR configuration, fixing hydration mismatches, prerendering routes, or making code SSR-compatible.
Didn't find tool you were looking for?