angular-tooling_skill

Overview

This skill helps Angular developers use the Angular CLI and ecosystem tools effectively for Angular v20+ projects. It covers project creation, code generation, development server workflows, building, testing, linting, configuration, adding libraries, updates, and performance analysis. The guidance focuses on concrete commands and configuration patterns to speed development and ensure predictable builds.

How this skill works

The skill provides command examples and configuration snippets for common tasks: creating standalone projects, generating components/services/guards, running dev servers, building for development and production, and running unit and e2e tests. It also explains angular.json structure, environment file replacements, caching, and how to add or update libraries. Use it to translate requirements into exact CLI commands and configuration edits.

When to use it

• Bootstrapping a new Angular v20+ project with preferred options (styles, routing, SSR).
• Generating components, services, directives, pipes, guards, interceptors, or other schematics.
• Starting the dev server with custom ports, SSL, or production mode for local testing.
• Building optimized production bundles and analyzing bundle size for performance.
• Running unit tests, CI-friendly test runs, or e2e tests and collecting coverage.
• Configuring angular.json, file replacements, persistent caching, or adding libraries.

Best practices

• Use standalone components by default in v20+ unless a shared module is needed.
• Prefer ng generate with --skip-tests or --inline-template only when intentionally simplifying files.
• Keep environment-specific settings in src/environments and wire them via fileReplacements.
• Enable persistent CLI cache for faster incremental builds and clear it if corrupted.
• Configure production builds with budgets, outputHashing, and source-map settings appropriate for your workflow.
• Run ng test --watch=false --browsers=ChromeHeadless in CI and include code-coverage when validating quality.

Example use cases

• Create a minimal standalone app with SCSS and routing: ng new my-app --style=scss --routing
• Generate a feature component with OnPush change detection and no spec file: ng g c features/settings --change-detection=OnPush --skip-tests
• Run a local production-mode server to validate optimizations: ng serve --configuration=production
• Produce a production bundle and analyze it: ng build -c production --stats-json && npx webpack-bundle-analyzer dist/my-app/browser/stats.json
• Add Angular Material or SSR support with official schematics: ng add @angular/material or ng add @angular/ssr