Master Modern Angular Development

This skill covers modern Angular (v20+) development across eleven areas: Signals as the new reactive primitive (including signal-based inputs/outputs and signal queries, and when to use Signals vs RxJS), Standalone Components (creation, bootstrapping without NgModule, lazy loading), Zoneless Angular (enabling and component patterns), server-side rendering and hydration (including incremental hydration in v20+ and hydration triggers), modern functional route guards and route-level data resolvers, dependency injection via the modern inject() function and injection tokens, component composition (content projection, host directives), Signal-based state management patterns, upcoming Signal-aware forms (v22+ preview) alongside current reactive forms, performance optimization (change detection strategies, @defer blocks, NgOptimizedImage), and testing signal components and signal inputs.

Its best-practice summary contrasts old vs new patterns directly: use Signals for local state rather than overusing RxJS; standalone components with direct imports rather than bloated SharedModules; OnPush change detection plus Signals rather than default CD everywhere; @defer/loadComponent for lazy loading rather than eager-loading everything; inject() rather than verbose constructor injection; the input() signal function rather than the legacy @Input() decorator; and enabling zoneless mode for new projects while not forcing it onto legacy code without testing.

Use this when building new Angular applications (v20+), implementing Signals-based reactive patterns, creating standalone components or migrating away from NgModules, configuring zoneless Angular, implementing SSR/prerendering/hydration, or adopting modern Angular patterns generally.

Not the right skill for migrating from AngularJS (1.x) - that's a separate angular-migration skill - for legacy Angular apps that can't upgrade, or for general TypeScript issues unrelated to Angular specifically (a typescript-expert skill covers that).

Inputs: the current Angular version and project structure (NgModule-based or standalone).

Outputs: modernized Angular code using Signals, standalone components, zoneless configuration where appropriate, SSR/hydration setup, inject()-based DI, and performance-optimized change detection - validated with build and tests, migrated gradually rather than via a big-bang refactor.

Angular CLI (SSR setup), Angular's Signals API, standalone component bootstrapping, NgOptimizedImage.

Angular developers building new v20+ applications or modernizing existing ones toward Signals, standalone components, and zoneless architecture, who need concrete do/don't guidance rather than outdated NgModule-era patterns.