Angular Resolve ERROR Error: Uncaught (in promise): TypeError: resolver is not a function

Question

I have a resolve that fetches data from an api and a service that depends on that resolve. The service depending on the resolve will be providing sections of data to multiple components and is only expected to be run once when the page loads. Here is the relevant code (imports & some annotations omitted):

product-details.service.ts

@Injectable()
export class ProductDetailsService {
    private productDetails: ProductDetails;

    constructor(route: ActivatedRoute) {
        this.productDetails = route.snapshot.data['product'];
    }

    public getProductDetails(): ProductDetails {
        return this.productDetails;
    }
}

product-details.resolve.ts

@Injectable()
export class ProductDetailsResolve implements Resolve<ProductDetails> {

    constructor(private httpService: HttpService) { }

    resolve(route: ActivatedRouteSnapshot): Observable<ProductDetails> {
        return this.httpService.getProductDetails(route.params['id']);
    }

}

app-routing.module.ts

const routes: Routes = [
    { path: 'main/:id', component: MainComponent, resolve: { product: ProductDetailsService } },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

some.component.ts

export class SomeComponent {
    public value: number = 0;

    constructor(private productDetailsService: ProductDetailsService) {
        this.value = productDetailsService.getProductDetails().value;
    }

}

When I run the app, I get this error:

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: resolver is not a function
TypeError: resolver is not a function
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.getResolver (router.es5.js:4559)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.resolveNode (router.es5.js:4537)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.runResolve (router.es5.js:4518)
    at MergeMapSubscriber.project (router.es5.js:4285)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:120)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:110)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at ArrayObservable.webpackJsonp.../../../../rxjs/observable/ArrayObservable.js.ArrayObservable._subscribe (ArrayObservable.js:114)
    at ArrayObservable.webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe (Observable.js:171)
    at ArrayObservable.webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe (Observable.js:159)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.getResolver (router.es5.js:4559)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.resolveNode (router.es5.js:4537)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.runResolve (router.es5.js:4518)
    at MergeMapSubscriber.project (router.es5.js:4285)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:120)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:110)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at ArrayObservable.webpackJsonp.../../../../rxjs/observable/ArrayObservable.js.ArrayObservable._subscribe (ArrayObservable.js:114)
    at ArrayObservable.webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe (Observable.js:171)
    at ArrayObservable.webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe (Observable.js:159)
    at resolvePromise (zone.js:795)
    at resolvePromise (zone.js:766)
    at zone.js:844
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

Research into this error has not given me any clues, and I can't think of any reason why the resolve is not being acknowledged as a function. Is there something that I am missing here?

You've configured ProductDetailsService as your resolver in the route definition instead of configuring ProductDetailsResolve. — JB Nizet
– JB Nizet, Commented Oct 25, 2017 at 22:57
So I did. Good catch! I made the change, but I'm now getting ERROR Error: Uncaught (in promise): Error: No provider for ProductDetailsResolve! Will update the question — binskits
– binskits, Commented Oct 25, 2017 at 23:01
Just read the error message. It tells you that you have no provider for the ProductDetailsResolve service. Have you added this service to the providers array of your NgModule? — JB Nizet
– JB Nizet, Commented Oct 25, 2017 at 23:02
Made that change, too. I'm new to Angular, so I'm still having trouble remembering to update everything/where I have to update. — binskits
– binskits, Commented Oct 25, 2017 at 23:06

VSO · Accepted Answer · 2019-09-27 17:42:40Z

5

I got this error when I accidentally passed a Guard as a resolver in my route config:

resolve: { data: MyGuardService }

So check that you haven't accidentally passed the wrong class. For example, if you want a canActivate guard, the code would look like this instead:

canActivate: [ MyGuardService ]

edited Sep 27, 2019 at 17:42

VSO

12.8k28 gold badges119 silver badges203 bronze badges

answered Jun 12, 2019 at 13:46

Stephen Paul

39.4k18 gold badges99 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VSO Over a year ago

This was my problem.

LJ Jones Over a year ago

Yup! I provided a similarly-named Service when I meant to provide a Resolver within the route config. Thanks!

Kurtis Jungersen · Accepted Answer · 2020-01-02 23:34:58Z

2

I received this error in Angular 8 because I forgot to implement the Resolve<T> interface in my resolver class. I.e. I had to change:

@Injectable({
    providedIn: 'root'
}
export class FooResolverService {
    // ...
}

to

@Injectable({
    providedIn: 'root'
}
export class FooResolverService implements Resolve<Foo> {
    // ...
}

answered Jan 2, 2020 at 23:34

Kurtis Jungersen

2,5641 gold badge31 silver badges35 bronze badges

Comments

nardocesar · Accepted Answer · 2018-12-12 16:58:56Z

1

You need to declare your ProductDetailsResolve as a provider of your AppRoutingModule, like this:

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [ProductDetailsResolve]
})

Remember to import ProductDetailsResolve on your AppRoutingModule

answered Dec 12, 2018 at 16:58

nardocesar

913 bronze badges

Collectives™ on Stack Overflow

Angular Resolve ERROR Error: Uncaught (in promise): TypeError: resolver is not a function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related