---
id: angular.modernization.angular-defer-views-v20-adoption
name: Angular Defer Views v20 Adoption
description: >
  Adopt Angular deferrable views in bounded post-upgrade modernization slices after Angular 20 is stable. Use when improving render timing, route splitting, and loading behavior with @defer without mixing the change into a version hop.
stack:
  - Angular
  - TypeScript
category: modernization
status: stable
version: 0.5.2
owner: NgAutoPilot
triggers:
  - defer views
  - "@defer"
  - deferrable views
  - lazy rendering modernization
compatibility:
  angular:
    min: "20"
---

# Angular Defer Views v20 Adoption

## Purpose

Adopt Angular deferrable views in bounded modernization slices after Angular 20 is stable.

## When to Use

- The app is already on stable Angular 20.
- The team wants to improve render timing or split heavy views incrementally.
- The change is modernization, not a version upgrade.

## When Not to Use

- The app is still in a version hop.
- The app is not on a version that supports `@defer`.

## Required Inputs

- heavy templates
- route boundaries
- loading and placeholder behavior
- tests for the target slice

## Procedure

1. Select a bounded feature area.
2. Introduce `@defer` in the smallest safe slice.
3. Keep placeholders, loading states, and fallback content explicit.
4. Validate rendering, timing, and tests.

## Do

- Prefer incremental conversion.
- Keep loading states intentional.
- Validate empty, loading, and error paths.

## Do Not

- Do not split the whole app in one pass.
- Do not mix this with a version hop.
- Do not hide loading regressions behind a smaller diff.

## Review Checklist

- [ ] Slice is bounded.
- [ ] Loading behavior is correct.
- [ ] Tests pass.
- [ ] Remaining loading debt is documented.

## Expected Output

1. Slice converted to `@defer`.
2. Remaining view debt.
3. Test result.
4. Follow-up list.

## Exit Criteria

- Adoption is incremental.
- The next slice is clear.