Angular 8 解析器不工作：没有解析器的提供程序

Question

我有一个使用解析器的路由器，但它现在无法正常工作。

这是错误消息：

未捕获(承诺(： NullInjectorError： StaticInjectorError(AppModule([BlogResolver]： StaticInjectorError(Platform： core([BlogResolver]： NullInjectorError： BlogResolver没有提供程序！

这是解析程序的函数代码：

resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any> {
const id = route.params.id;
return this.service.findById(
}

这是路由器

{
path: 'blog/:id',
component: BlogpostComponent,
resolve: {
blogpost: BlogResolver,
},

我从未发现过此错误，也没有找到类似的东西。任何帮助，不胜感激。

编辑：

app.module

@NgModule({
declarations: [
AppComponent,
FooterComponent,
NavbarComponent,
HomeComponent,
NotFoundComponent,
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
NgbModule,
AppRoutingModule,
MinhaEmpresaModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

子模块：

@NgModule({
declarations: [
AEmpresaComponent,
ComoChegarComponent,
TrabalheConoscoComponent,
BlogComponent,
BlogpostComponent,
],
imports: [
CommonModule,
ReactiveFormsModule,
AEmpresaRoutingModule,
NgbPaginationModule,
],
})

Answer 1

你忘了在代码的某个地方提供BlogResolver。它可能在

应用模块：

@NgModule({
imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
declarations: [ AppComponent ],
bootstrap:    [ AppComponent ],
providers: [ BlogResolver ]  // **** ADD THIS LINE ****
})
export class AppModule { }

或在同一博客解析器中：

@Injectable({
providedIn: "root"  // **** ADD THIS LINE ****
})
export class BlogResolver implements Resolve<Somedata> {
data: Somedata[] = [{ id: 1, name: "ABC" }];

如果您想看到相同类型的错误消息，请检查此堆栈闪电战：https://stackblitz.com/edit/angular-m8azja

Answer 2

看起来您需要提供解析程序。您可以通过几种方式执行此操作。

1. 声明解析程序时，请添加Injectable({providedIn: 'root'})修饰器。

@Injectable({
providedIn: 'root',
})
export class BlogResolver implements Resolve<Blog> {
constructor(private bs: BlogService, private router: Router) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Blog> {
...
}
}

2. 或者您可以将其添加到路由模块中的提供程序数组中。

const routes: Routes = [{
path: 'blog/:id',
component: BlogpostComponent,
resolve: {
blogpost: BlogResolver,
}
}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [
BlogResolver // <-- Add resolver here.
],
exports: [RouterModule]
})
export class BlogRoutingModule {}

并确保将博客路由模块添加到功能或主应用程序模块中。

Answer 3

我来这里寻找一个看起来与此非常相似的错误的解决方案。我确实正确地提供了解析器，但对我来说，原因是在我的路由定义中我写道：

{
// ...
resolve: BlogResolver
}

而不是：

{
// ...
resolve: {
blogpost: BlogResolver
}
}