Resolver for pre-fetching data in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a resolver class that implements the correct interface.

Angular

export class DataResolver implements [1] {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    // logic here
  }
}

Drag options to blanks, or click blank then click option'

AResolve

BResolveFn

CResolveData

DResolveInterface

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent interface like Resolve or ResolveData.

Forgetting to implement any interface.

The resolver class must implement Resolve to pre-fetch data before route activation.

2fill in blank

medium

Complete the resolver function to return an observable from the service.

Angular

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
  return this.dataService.[1]();
}

Drag options to blanks, or click blank then click option'

AfetchData

BretrieveData

CloadData

DgetData

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name that does not exist in the service.

Returning a promise instead of an observable.

The service method getData() returns the observable needed for pre-fetching.

3fill in blank

hard

Fix the error in the resolver provider registration.

Angular

providers: [
  {
    provide: [1],
    useClass: DataResolver
  }
]

Drag options to blanks, or click blank then click option'

ARESOLVER

BDATA_RESOLVER

CResolveFn

DDATA_RESOLVER_TOKEN

Attempts:

3 left

💡 Hint

Common Mistakes

Using a custom or undefined token instead of the interface name.

Forgetting to provide the resolver in the module or component.

The provider token for resolver classes is a custom injection token like DATA_RESOLVER, not ResolveFn.

4fill in blank

hard

Fill both blanks to define a route that uses the resolver to pre-fetch data.

Angular

const routes: Routes = [
  {
    path: 'items',
    component: ItemsComponent,
    resolve: { data: [1] },
    providers: [[2]]
  }
];

Drag options to blanks, or click blank then click option'

AdataResolver

BDataResolver

CResolveFn

DdataResolverProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name directly in the resolve property.

Not providing the resolver in the providers array.

The resolve property uses the resolver name dataResolver, and the providers array includes dataResolverProvider to register it.

5fill in blank

hard

Fill all three blanks to create a resolver function that fetches data and handles errors.

Angular

export const dataResolver: ResolveFn<any> = (route, state) => {
  return dataService.[1]().pipe(
    catchError(error => {
      console.error(error);
      return of([2]);
    })
  );
};

providers: [
  [3]
]

Drag options to blanks, or click blank then click option'

AgetData

B{}

CdataResolverProvider

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Not handling errors with catchError.

Returning undefined or null on error.

Forgetting to provide the resolver provider.

The resolver calls getData(), returns an empty object {} on error, and registers dataResolverProvider as provider.