Angular 5：无法解析RouterEffects的所有参数：（？，？，？）

Question

我的应用程序中的路由无法按预期工作。我在这里做错了吗？

使用Angular v5。我搜索了很多，但没有一个答案适合我。

任何建议都会有所帮助。

  

未捕获错误：无法解析RouterEffects的所有参数：（？，？，？）。

app.routing.ts

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'products/:productId',
    loadChildren: './product/product.module#ProductModule'
  }
];

product.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { RouterModule, Routes } from '@angular/router';

import { ProductComponent } from './product.component';
import { ProductDetailComponent } from './product-detail';
import { ProductSuggestionComponent } from './product-suggestion';

const routes: Routes = [
  { path: '', component: ProductComponent }
];

@NgModule({
  imports: [
    CommonModule,
    FlexLayoutModule,
    RouterModule.forChild(routes),
  ],
  declarations: [
    ProductComponent,
    ProductDetailComponent,
    ProductSuggestionComponent
  ],
  exports: [RouterModule]
})
export class ProductModule {
}

home.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { RouterModule, Routes } from '@angular/router';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';

import { CategoriesComponent } from './categories/categories.component';
import { ProductGridComponent } from './product-grid/product-grid.component';
import { SearchComponent } from './search/search.component';
import { CategoriesEffects, ProductsEffects, reducers } from './store';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'categories' },
  { path: 'search', component: SearchComponent },
  {
    path: 'categories',
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'all' },
      { path: ':category', component: CategoriesComponent }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    FlexLayoutModule,

    StoreModule.forFeature('home', reducers),
    EffectsModule.forFeature([ CategoriesEffects, ProductsEffects ])
  ],
  declarations: [
    CategoriesComponent,
    ProductGridComponent,
    SearchComponent
  ],
  exports: [RouterModule]
})
export class HomeModule {
}

route.ts

import { Location } from '@angular/common';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { map, tap } from 'rxjs/operators';
import { RouterActionTypes, Go } from '../actions';


@Injectable()
export class RouterEffects {

  @Effect({ dispatch: false })
  navigate$ = this.actions$
    .pipe(
      ofType<Go>(RouterActionTypes.Go),
      map(action => action.payload),
      tap(({ commands, extras }) => this.router.navigate(commands, extras))
  )

  @Effect({ dispatch: false })
  navigateBack$ = this.actions$
    .pipe(
      ofType(RouterActionTypes.Back),
      tap(() => this.location.back())
    );

  @Effect({ dispatch: false })
  navigateForward$ = this.actions$
    .pipe(
      ofType(RouterActionTypes.Forward),
      tap(() => this.location.forward())
    );

  constructor(
    private actions$: Actions,
    private location: Location,
    private router: Router
  ) {}
}