Angular Tooling

Angular Tooling is a community skill for configuring and using Angular development tools, covering Angular CLI, schematics, ESLint configuration, build optimization, and debugging tools for productive Angular development.

What Is This?

Overview

Angular Tooling provides patterns for maximizing productivity with Angular development tools. It covers Angular CLI commands for generating components, services, and modules with correct conventions, custom schematics for scaffolding project-specific boilerplate with team standards baked in, ESLint configuration with angular-eslint for enforcing Angular-specific coding rules, build optimization with bundle analysis, tree-shaking verification, and source map configuration, and debugging tools including Angular DevTools extension, source maps in Chrome DevTools, and augury for component tree inspection. The skill enables teams to establish consistent development workflows with automated quality enforcement across all contributors regardless of experience level.

Who Should Use This

This skill serves Angular developers configuring CLI workflows and code generation, teams creating custom schematics for consistent project scaffolding, and engineers optimizing build performance and debugging Angular applications. It is particularly valuable for teams onboarding new developers who need guardrails to follow established project conventions.

Why Use It?

Problems It Solves

Manual file creation for components and services leads to inconsistent naming and structure. Default CLI configuration may not match team conventions for standalone components or testing patterns. Build output without analysis makes it difficult to identify bundle size regressions. Debugging change detection and dependency injection requires specialized tools beyond standard browser DevTools. Without enforced linting rules, Angular-specific anti-patterns such as mutable inputs or missing OnDestroy cleanup can accumulate silently across a codebase.

Core Highlights

CLI generators create files following consistent naming conventions and project structure. Custom schematics encode team standards into reusable code generators. ESLint rules catch Angular-specific issues like missing standalone imports and improper lifecycle usage. Bundle analyzer visualizes dependency sizes for optimization targeting.

How to Use It?

Basic Usage

#!/bin/bash

ng generate component \
  features/user-profile \
  --standalone \
  --change-detection OnPush

ng generate service \
  core/services/auth

ng generate guard \
  core/guards/auth \
  --functional

ng build --stats-json
npx webpack-bundle-analyzer \
  dist/my-app/stats.json

Real-World Examples

// .eslintrc.json configuration
{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@angular-eslint"
          + "/recommended",
        "plugin:@angular-eslint"
          + "/template/process-"
          + "inline-templates"
      ],
      "rules": {
        "@angular-eslint/"
          + "component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style":
              "kebab-case"
          }
        ],
        "@angular-eslint/"
          + "no-empty-lifecycle-"
          + "method": "error",
        "@angular-eslint/"
          + "prefer-standalone":
            "warn"
      }
    },
    {
      "files":
        ["*.html"],
      "extends": [
        "plugin:@angular-eslint"
          + "/template/"
          + "recommended",
        "plugin:@angular-eslint"
          + "/template/"
          + "accessibility"
      ]
    }
  ]
}

Advanced Tips

Create workspace-level schematics that generate feature modules with routing, service, and component files matching team conventions. Use Angular DevTools profiler to measure change detection cycles and identify expensive component renders. Configure budget warnings in angular.json to fail builds when bundle sizes exceed limits, setting initial bundle thresholds at values appropriate for your application's performance targets. Use the ng update command to automate dependency and configuration migration between Angular versions with built-in schematics that handle breaking changes. Integrate Angular DevTools profiler recordings into performance review workflows for tracking rendering improvements over time.

When to Use It?

Use Cases

Configure CLI defaults so all generated components use standalone and OnPush patterns. Set up ESLint with Angular rules for template accessibility checking. Create a custom schematic that generates a CRUD feature with service, component, and route files. Running bundle analysis as part of a pull request review process helps catch size regressions before they reach production.

Related Topics

Angular CLI, schematics, ESLint, bundle analysis, and Angular DevTools.

Important Notes

Requirements

Angular CLI installed globally or via npx. Node.js 18 or later for current Angular tooling. ESLint with angular-eslint packages for linting support. Prettier for consistent code formatting alongside lint rules.

Usage Recommendations

Do: configure CLI schematic defaults in angular.json to match team conventions automatically. Use budget configurations to catch bundle size regressions in CI. Install Angular DevTools browser extension for component tree inspection.

Don't: manually create component files when CLI generators ensure correct naming and imports. Ignore ESLint warnings about deprecated patterns that will break in future versions. Ship applications without analyzing bundle composition for unnecessary dependencies.

Limitations

Custom schematics have a steep learning curve for teams unfamiliar with the schematics API. Angular DevTools profiler adds overhead that affects measured performance. CLI code generation cannot capture all team-specific patterns without custom schematics. Webpack-based analysis tools may not work with esbuild-based builds introduced in newer Angular versions, requiring alternative tools such as esbuild-bundle-analyzer for accurate output inspection.