angular-best-practices-v20

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

Priority	Category	Impact	Prefix
1	Change Detection	CRITICAL	change-
2	Bundle & Lazy Loading	CRITICAL	bundle-
3	RxJS Optimization	HIGH	rxjs-
4	Template Performance	HIGH	template-
5	Dependency Injection	MEDIUM-HIGH	di-
6	HTTP & Caching	MEDIUM	http-
7	Forms Optimization	MEDIUM	forms-
8	General Performance	LOW-MEDIUM	ssr-

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