升级Angular 5后出现依赖注入错误：No provider for NgReduxRouter

我来帮你一步步搞定这个升级后遇到的Redux路由依赖注入错误：

• 第一步：确认依赖包已安装
  首先得确保你已经装了@angular-redux/router，毕竟NgReduxRouter是这个包的核心服务。如果还没安装，在项目根目录运行：

  npm install @angular-redux/router --save
  

• 第二步：在AppModule里正确配置
  打开app.module.ts，需要同时导入并配置NgReduxRouterModule和NgReduxRouter服务：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { StoreModule } from '@angular-redux/store';
  import { NgReduxRouterModule, NgReduxRouter } from '@angular-redux/router';
  import { rootReducer } from './store/reducers';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      StoreModule.forRoot(rootReducer),
      // 初始化路由Redux模块
      NgReduxRouterModule.forRoot()
    ],
    // 手动把NgReduxRouter加入提供者数组
    providers: [NgReduxRouter],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 第三步：完成路由与Redux的绑定初始化
  在根组件（比如app.component.ts）或者专门的Store初始化服务里，调用NgReduxRouter的initialize()方法，让路由状态和Redux store同步起来：

  import { Component } from '@angular/core';
  import { NgRedux } from '@angular-redux/store';
  import { NgReduxRouter } from '@angular-redux/router';
  import { IAppState } from './store/state';
  import { rootReducer } from './store/reducers';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent {
    constructor(
      private ngRedux: NgRedux<IAppState>,
      private ngReduxRouter: NgReduxRouter
    ) {
      // 初始化Redux store
      this.ngRedux.provideStore(rootReducer);
      // 绑定路由状态到Redux
      this.ngReduxRouter.initialize();
    }
  }
  

这个错误的核心原因是：在Angular 5和Angular-Redux 7.x的搭配中，NgReduxRouter服务不再自动注册到依赖注入系统里，必须手动添加到模块的providers数组，同时要确保路由模块完成初始化配置。

内容的提问来源于stack exchange，提问作者Taladan