Angular解决方案错误：Uncaught (in promise) TypeError：resolver不是一个函数。

Question

我有一个从API获取数据的解析器和一个依赖于该解析器的服务。依赖于解析器的服务将向多个组件提供数据部分，并且仅在页面加载时运行一次。以下是相关代码（省略了导入和一些注释）： < p > 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;
    }

}

当我运行应用程序时，出现了以下错误：

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>

我对这个错误进行了研究，但是没有找到任何线索，我也想不出为什么resolve没有被识别为一个函数。这里是否有我忽略的东西？

- binskits

---

你已经在路由定义中将ProductDetailsService配置为解析器，而不是配置ProductDetailsResolve。 - JB Nizet

好的，我改了。你发现得真好！我已经做出了更改，但是现在出现了错误：Error: Uncaught (in promise): Error: No provider for ProductDetailsResolve! 我会更新问题。 - binskits

只需要阅读错误信息，它告诉你没有为ProductDetailsResolve服务提供者。你是否已将该服务添加到NgModule的提供者数组中？ - JB Nizet

我也进行了那个更改。我对Angular还很新，所以我仍然有困难记住在哪里以及更新所有内容。 - binskits

Answer 1

当我不小心将一个 Guard 作为路由配置中的解析器时，出现了以下错误：

resolve: { data: MyGuardService }

请检查您是否意外传递了错误的类。例如，如果您想要一个canActivate守卫，则代码应该像这样：

canActivate: [ MyGuardService ]

- Stephen Paul

---

这是我的问题。 - VSO

是的！我本来想在路由配置中提供一个解析器，但却提供了一个同名的服务。谢谢！ - Leif Jones

Answer 2

我发现在Angular 8中出现了这个错误，因为我忘记在解析器类中实现Resolve<T>接口。也就是说，我需要更改如下内容：

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

to

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

- Kurtis Jungersen

Answer 3

您需要将ProductDetailsResolve声明为AppRoutingModule的提供者，如下所示：

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

请记得在您的AppRoutingModule中导入ProductDetailsResolve

- nardocesar