Resolver for pre-fetching data in Angular - Mini Project: Build & Apply

Resolver for pre-fetching data

📖 Scenario: You are building an Angular app that shows a list of books. Before the book list page loads, you want to fetch the books data so the page can display it immediately without waiting.

🎯 Goal: Create an Angular resolver that pre-fetches the books data before the book list component loads.

📋 What You'll Learn

Create a simple array of book objects with id and title

Create a variable for the API endpoint URL

Create a resolver service that fetches the books data using Angular's HttpClient

Add the resolver to the route configuration for the book list component

💡 Why This Matters

🌍 Real World

Resolvers help Angular apps load data before showing a page, improving user experience by avoiding empty or loading states.

💼 Career

Understanding resolvers is important for Angular developers to build fast, user-friendly apps that handle data loading efficiently.

1

Create the books data array

Create a variable called books that is an array of objects. Each object should have id and title. Use these exact entries: { id: 1, title: 'Angular Basics' }, { id: 2, title: 'Learning TypeScript' }, { id: 3, title: 'RxJS in Depth' }.

Angular

// Create the books array with the given objects
// Your code here

Need a hint?

Use a variable named books and assign it an array with the exact objects.

2

Add the API endpoint URL variable

Create a variable called apiUrl and set it to the string 'https://api.example.com/books'.

Angular

books = [
  { id: 1, title: 'Angular Basics' },
  { id: 2, title: 'Learning TypeScript' },
  { id: 3, title: 'RxJS in Depth' }
]
// Create the apiUrl variable with the given string
// Your code here

Need a hint?

Use a variable named apiUrl and assign it the exact URL string.

3

Create the resolver service to fetch books

Create an Angular resolver service class called BooksResolver that implements Resolve<any>. Inject HttpClient in the constructor. Implement the resolve() method to return this.http.get(apiUrl).

Angular

books = [
  { id: 1, title: 'Angular Basics' },
  { id: 2, title: 'Learning TypeScript' },
  { id: 3, title: 'RxJS in Depth' }
]

apiUrl = 'https://api.example.com/books'

// Create BooksResolver service class with resolve() method
// Your code here

Need a hint?

Use @Injectable with providedIn: 'root'. Implement Resolve<any>. Inject HttpClient and return this.http.get(apiUrl) in resolve().

4

Add the resolver to the route configuration

In the Angular routes array, add a route object for path 'books' with component BookListComponent and add resolve: { booksData: BooksResolver } to pre-fetch data.

Angular

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

books = [
  { id: 1, title: 'Angular Basics' },
  { id: 2, title: 'Learning TypeScript' },
  { id: 3, title: 'RxJS in Depth' }
]

apiUrl = 'https://api.example.com/books'

@Injectable({ providedIn: 'root' })
export class BooksResolver implements Resolve {
  constructor(private http: HttpClient) {}

  resolve(): Observable {
    return this.http.get(apiUrl);
  }
}

import { Routes } from '@angular/router';
import { BookListComponent } from './book-list.component';

// Add the route for 'books' with BookListComponent and resolver
const routes: Routes = [
  
  // Your code here
];

Need a hint?

Define routes array with an object for path 'books', set component to BookListComponent, and add resolve property with booksData: BooksResolver.