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