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