Resolver for pre-fetching data in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a resolver fails to fetch data?

Consider an Angular resolver that fetches user data before activating a route. If the resolver returns an error or fails, what will happen to the route activation?

Angular

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { UserService } from './user.service';

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<any> {
  constructor(private userService: UserService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return this.userService.getUser(route.params['id']).pipe(
      catchError(error => throwError(() => new Error('Failed to load user')))
    );
  }
}

A The route activation will be canceled and navigation will not proceed.

B The route will activate normally but the component will receive undefined data.

C The route will activate but Angular will display a default error message automatically.

D The resolver will retry fetching data indefinitely until it succeeds.

💡 Hint

Think about how Angular handles errors in resolvers and what happens to navigation when a resolver fails.

If a resolver returns an error, Angular cancels the navigation by default. The route will not activate, preventing the component from loading with incomplete data.

📝 Syntax

intermediate

Identify the correct resolver syntax for pre-fetching data

Which of the following Angular resolver implementations correctly pre-fetches data and returns an observable?

A

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

@Injectable({ providedIn: 'root' })
export class DataResolver implements Resolve<any> {
  constructor(private http: HttpClient) {}
  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    return this.http.get('/api/data');
  }
}

B

export class DataResolver implements Resolve {
  resolve(route: ActivatedRouteSnapshot): any {
    return this.http.get('/api/data').subscribe();
  }
}

C

export class DataResolver {
  resolve(route: ActivatedRouteSnapshot): Promise<any> {
    return fetch('/api/data');
  }
}

D

export class DataResolver implements Resolve {
  resolve() {
    return this.http.get('/api/data');
  }
}

💡 Hint

Remember that resolvers must implement the Resolve interface and return an observable or promise without subscribing inside.

Option A correctly implements Resolve<any>, injects HttpClient, and returns an observable without subscribing. Option A misses constructor injection. Option A returns a promise from fetch but does not implement Resolve interface. Option A subscribes inside resolver which is incorrect.

❓ state_output

advanced

What data does the component receive from the resolver?

Given this route configuration and resolver, what will the component receive as data in ActivatedRoute?

Angular

const routes = [
  {
    path: 'profile/:id',
    component: ProfileComponent,
    resolve: { userData: UserResolver }
  }
];

@Injectable({ providedIn: 'root' })
export class UserResolver implements Resolve<User> {
  constructor(private userService: UserService) {}
  resolve(route: ActivatedRouteSnapshot): Observable<User> {
    return this.userService.getUser(route.params['id']);
  }
}

// In ProfileComponent constructor:
constructor(private route: ActivatedRoute) {
  this.route.data.subscribe(data => {
    console.log(data.userData);
  });
}

A Undefined, because resolvers do not pass data to components.

B An observable of the user data, not yet resolved.

C An object containing the user data fetched by the resolver.

D The route parameters object with the user ID.

💡 Hint

Resolvers provide data to the route's data observable after resolving.

The resolver fetches user data and Angular waits for it before activating the route. The resolved data is available in route.data under the key userData.

🔧 Debug

advanced

Why does this resolver cause a runtime error?

Examine the following resolver code. Why does it cause a runtime error when navigating to the route?

Angular

export class ProductResolver implements Resolve<Product> {
  constructor(private productService: ProductService) {}

  resolve(route: ActivatedRouteSnapshot): Product {
    this.productService.getProduct(route.params['id']).subscribe(product => {
      return product;
    });
  }
}

A Because the resolver subscribes inside and returns the subscription instead of data.

B Because the resolver returns void instead of an observable or promise.

C Because the ProductService method getProduct does not exist.

D Because the resolver does not implement the Resolve interface correctly.

💡 Hint

Resolvers must return an observable or promise, not void or subscription.

The resolver subscribes inside and does not return anything from resolve, so it returns void. Angular expects an observable or promise to wait for. This causes a runtime error.

🧠 Conceptual

expert

How to handle multiple resolvers for a single route?

You want to pre-fetch both user data and settings before activating a route. Which approach correctly uses multiple resolvers in Angular routing?

A Use multiple <router-outlet> elements each with its own resolver.

B Use an array of resolvers in the route: <code>resolve: [UserResolver, SettingsResolver]</code>

C Chain resolvers inside one resolver class that calls both services sequentially.

D Use an object with keys for each resolver: <code>resolve: { user: UserResolver, settings: SettingsResolver }</code>

💡 Hint

Think about how Angular expects the resolve property to be structured for multiple resolvers.

Angular routing expects resolve to be an object mapping keys to resolver classes. Each key's resolved data is available in route.data under that key.