title: Angular Resolve ERROR Error: Uncaught (in promise): TypeError: resolver is not a function
body: <p>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 &amp; some annotations omitted):</p>
  
  <p><em>product-details.service.ts</em></p>
  
  <pre><code>@Injectable()
  export class ProductDetailsService {
      private productDetails: ProductDetails;
  
      constructor(route: ActivatedRoute) {
          this.productDetails = route.snapshot.data['product'];
      }
  
      public getProductDetails(): ProductDetails {
          return this.productDetails;
      }
  }
  </code></pre>
  
  <p><em>product-details.resolve.ts</em></p>
  
  <pre><code>@Injectable()
  export class ProductDetailsResolve implements Resolve&lt;ProductDetails&gt; {
  
      constructor(private httpService: HttpService) { }
  
      resolve(route: ActivatedRouteSnapshot): Observable&lt;ProductDetails&gt; {
          return this.httpService.getProductDetails(route.params['id']);
      }
  
  }
  </code></pre>
  
  <p><em>app-routing.module.ts</em></p>
  
  <pre><code>const routes: Routes = [
      { path: 'main/:id', component: MainComponent, resolve: { product: ProductDetailsService } },
  ];
  
  @NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p><em>some.component.ts</em></p>
  
  <pre><code>export class SomeComponent {
      public value: number = 0;
  
      constructor(private productDetailsService: ProductDetailsService) {
          this.value = productDetailsService.getProductDetails().value;
      }
  
  }
  </code></pre>
  
  <p>When I run the app, I get this error:</p>
  
  <pre><code>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 &lt;anonymous&gt;
  </code></pre>
  
  <p>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?</p>