Angular 8 解析器不工作：解析器沒有提供者

Question

我有一個使用解析器的路由器，但它現在不工作。

這是錯誤消息：

未捕獲（承諾）：NullInjectorError：StaticInjectorError（AppModule）[BlogResolver]：StaticInjectorError（平台：核心）[BlogResolver]：NullInjectorError：沒有BlogResolver的提供者

這是解析器的 function 代碼：

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

這是路由器

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

我從來沒有遇到過這個錯誤，也沒有發現任何類似的東西。 任何幫助表示贊賞。

編輯：

應用程序模塊

@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 { }

或在同一個BlogResolver 中：

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

如果您想看到相同類型的錯誤消息，請檢查此 Stackblitz： 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. 或者您可以將其添加到路由模塊中的 providers 數組中。

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 {}

並確保將 BlogRoutingModule 添加到功能或主應用程序模塊。

Answer 3

我來這里是為了尋找與這個非常相似的錯誤的解決方案。 我確實正確地提供了解析器，但對我來說，原因是在我的路由定義中我寫道：

{
  // ...
  resolve: BlogResolver
}

代替：

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