Resolver for pre-fetching data in Angular - Step-by-Step Execution

Concept Flow - Resolver for pre-fetching data

Route Activated

↓

Resolver Called

↓

Fetch Data (async)

↓

Data Ready?

No→Wait

Yes↓

Pass Data to Component

↓

Component Renders with Data

When a route activates, Angular calls the resolver to fetch data before the component loads. The route waits until data is ready, then passes it to the component.

Execution Sample

Angular

export const routes = [
  { path: 'user/:id', component: UserComponent, resolve: { user: UserResolver } }
];

Defines a route that uses a resolver to fetch user data before loading UserComponent.

Execution Table

Step	Action	Resolver State	Data Fetched	Component State
1	Route 'user/42' activated	Not started	None	Not loaded
2	Resolver UserResolver called	Fetching	None	Not loaded
3	Fetching user data async	Fetching	None	Not loaded
4	User data received	Completed	User{id:42, name:'Alice'}	Not loaded
5	Data passed to UserComponent	Completed	User{id:42, name:'Alice'}	Loading
6	UserComponent renders with data	Completed	User{id:42, name:'Alice'}	Loaded with data
7	Route fully loaded	Completed	User{id:42, name:'Alice'}	Displayed

💡 Data fetched and component rendered, route loading complete.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	Final
resolverState	Not started	Fetching	Completed	Completed	Completed
fetchedData	None	None	User{id:42, name:'Alice'}	User{id:42, name:'Alice'}	User{id:42, name:'Alice'}
componentState	Not loaded	Not loaded	Not loaded	Loaded with data	Displayed

Key Moments - 3 Insights

Why does the route wait before loading the component?

Because the resolver fetches data asynchronously first (see execution_table step 3 and 4). The route waits until data is ready to ensure the component has what it needs.

What happens if the resolver fails to fetch data?

The route can be configured to handle errors or redirect. But by default, the component won't load until the resolver completes or errors out (not shown in this trace).

How does the component access the resolved data?

The resolved data is passed via the route's data property and can be accessed inside the component (see execution_table step 5).

Visual Quiz - 3 Questions

Look at the execution table, what is the resolverState at step 3?

A Not started

B Completed

C Fetching

D Error

💡 Hint

Check the 'Resolver State' column at step 3 in the execution_table.

At which step does the component start rendering with data?

A Step 6

B Step 5

C Step 4

D Step 7

💡 Hint

Look for 'Component renders with data' in the 'Action' column of execution_table.

If the resolver took longer to fetch data, which step would be delayed?

A Step 2

B Step 3

C Step 5

D Step 7

💡 Hint

Refer to the 'Fetching user data async' action in execution_table step 3.

Concept Snapshot

Resolver pre-fetches data before route loads.
Route waits for resolver to complete.
Data passed to component via route data.
Component renders only after data ready.
Helps avoid loading states inside component.

Full Transcript

When Angular activates a route with a resolver, it first calls the resolver to fetch data asynchronously. The route waits until the resolver finishes fetching data. Once data is ready, it passes the data to the component. Then the component renders with the data available. This ensures the component does not load without the necessary data. The resolver state changes from 'Not started' to 'Fetching' to 'Completed' as data is fetched. The component state changes from 'Not loaded' to 'Loaded with data' after data is passed. This flow helps avoid showing empty or loading states inside the component by pre-fetching data during routing.