Angular Best Practices (v20+)

Comprehensive performance optimization guide for Angular 20+ applications with modern features like Signals, httpResource, signal inputs/outputs, @defer blocks, and native control flow syntax. Contains 35+ rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

• Writing new Angular 20+ components
• Using Signals for reactive state (signal, computed, linkedSignal, effect)
• Using httpResource/resource for data fetching
• Using signal inputs/outputs instead of decorators
• Implementing @defer for lazy loading
• Using native control flow (@if, @for, @switch)
• Implementing SSR with incremental hydration
• Reviewing code for performance issues

Key Features (v20+)

• Signals – Fine-grained reactivity (signal, computed, linkedSignal, effect)
• httpResource – Signal-based HTTP with automatic loading states
• Signal inputs/outputs – input(), output() replacing decorators
• @defer – Template-level lazy loading with hydration triggers
• @for / @if – Native control flow with required track
• Standalone by default – No standalone: true needed
• Host bindings – host object instead of @HostBinding decorators
• Functional interceptors – Simpler HTTP interceptors
• takeUntilDestroyed – Built-in subscription cleanup
• Incremental hydration – @defer (hydrate on …) for SSR

Rule Categories by Priority

Quick Reference

1. Change Detection (CRITICAL)

• change-signals – Use Signals instead of BehaviorSubject for reactive state
• change-onpush – Use OnPush change detection strategy
• change-detach-reattach – Detach change detector for heavy operations
• change-run-outside-zone – Run non-UI code outside NgZone
• component-signal-io – Use signal inputs/outputs instead of @Input/@Output decorators
• signal-computed-pure – Keep computed() pure, no side effects
• signal-effect-patterns – Use effect() correctly, avoid anti-patterns
• signal-linkedsignal – Use linkedSignal for derived + writable state

2. Bundle & Lazy Loading (CRITICAL)

• bundle-standalone – Use standalone components (default in v20+)
• bundle-lazy-routes – Lazy load routes with loadComponent/loadChildren
• bundle-defer – Use @defer blocks for heavy components
• bundle-preload – Preload routes on hover/focus for perceived speed
• bundle-no-barrel-imports – Avoid barrel files, use direct imports

3. RxJS Optimization (HIGH)

• rxjs-async-pipe – Use async pipe instead of manual subscriptions
• rxjs-takeuntil – Use takeUntilDestroyed for automatic cleanup
• rxjs-share-replay – Share observables to avoid duplicate requests
• rxjs-operators – Use efficient RxJS operators
• rxjs-mapping-operators – Use correct mapping operators (switchMap vs exhaustMap)
• rxjs-no-nested-subscribe – Avoid nested subscriptions

4. Template Performance (HIGH)

• template-trackby – Use track function in @for loops (required in v20+)
• template-pure-pipes – Use pure pipes for expensive transformations
• template-ng-optimized-image – Use NgOptimizedImage for image optimization
• template-no-function-calls – Avoid function calls in templates
• template-virtual-scroll – Use virtual scrolling for large lists

5. Dependency Injection (MEDIUM-HIGH)

• di-provided-in-root – Use providedIn: ‘root’ for singleton services
• di-injection-token – Use InjectionToken for non-class dependencies
• di-factory-providers – Use factory providers for complex initialization
• directive-host-composition – Use hostDirectives for composition

6. HTTP & Caching (MEDIUM)

• http-resource – Use httpResource/resource for signal-based data fetching
• http-interceptors – Use functional interceptors for cross-cutting concerns
• http-transfer-state – Use TransferState for SSR hydration
• routing-signal-inputs – Use signal-based route inputs

7. Forms Optimization (MEDIUM)

• forms-reactive – Use reactive forms with typed FormGroup

8. General Performance (LOW-MEDIUM)

• ssr-hydration – Use incremental hydration with @defer (hydrate on …)
• perf-memory-leaks – Prevent memory leaks (timers, listeners, subscriptions)
• perf-web-workers – Offload heavy computation to Web Workers
• arch-smart-dumb-components – Use Smart/Dumb component pattern

How to Use

Read individual rule files for detailed explanations and code examples:

rules/change-signals.md
rules/bundle-defer.md
rules/http-resource.md

Each rule file contains:

• Brief explanation of why it matters
• Incorrect code example with explanation
• Correct code example with explanation
• Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md