angular-best-practices-v20

Original：🇺🇸 English

Translated

Angular 20+ performance optimization guidelines with Signals, httpResource, signal inputs/outputs, @defer, and native control flow (@if, @for). Use when writing, reviewing, or refactoring modern Angular code. Triggers on tasks involving Angular components, services, data fetching, bundle optimization, or performance improvements.

3installs

Sourcedevelite98/angular-best-practices

Added on2026-02-07

NPX Install

npx skill4agent add develite98/angular-best-practices angular-best-practices-v20

SKILL.md Content

View Translation Comparison →

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


change-
bundle-
rxjs-
template-
di-
http-
forms-
ssr-

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