Search code examples
angularngrx

How do I fix " NullInjectorError: No provider for InjectionToken @ngrx/router-store Configuration!" after upgrading to ngrx v8 on my Angular project?


I just upgraded a project from Angular 6 (and ngrx 6) to Angular 8. I tried to follow the migration guide for Angular 8, and was able to get everything to build, but ended up getting this error when I run it:

Full error message:

Unhandled Promise rejection: StaticInjectorError(AppModule)[StoreRouterConnectingModule -> InjectionToken @ngrx/router-store Configuration]: 
  StaticInjectorError(Platform: core)[StoreRouterConnectingModule -> InjectionToken @ngrx/router-store Configuration]: 
    NullInjectorError: No provider for InjectionToken @ngrx/router-store Configuration! ; Zone: <root> ; Task: Promise.then ; Value: NullInjectorError: StaticInjectorError(AppModule)[StoreRouterConnectingModule -> InjectionToken @ngrx/router-store Configuration]: 
  StaticInjectorError(Platform: core)[StoreRouterConnectingModule -> InjectionToken @ngrx/router-store Configuration]: 
    NullInjectorError: No provider for InjectionToken @ngrx/router-store Configuration!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:4200/vendor.js:44694:25)
    at resolveToken (http://localhost:4200/vendor.js:44932:24)
    at tryResolveToken (http://localhost:4200/vendor.js:44876:16)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:4200/vendor.js:44780:20)
    at resolveToken (http://localhost:4200/vendor.js:44932:24)
    at tryResolveToken (http://localhost:4200/vendor.js:44876:16)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:4200/vendor.js:44780:20)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:61915:29)
    at _createClass (http://localhost:4200/vendor.js:61968:32)
    at _createProviderInstance (http://localhost:4200/vendor.js:61932:26) NullInjectorError: StaticInjectorError(AppModule)[StoreRouterConnectingModule -> InjectionToken @ngrx/router-store Configuration]: 
  StaticInjectorError(Platform: core)[StoreRouterConnectingModule -> InjectionToken @ngrx/router-store Configuration]: 
    NullInjectorError: No provider for InjectionToken @ngrx/router-store Configuration!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:4200/vendor.js:44694:25)
    at resolveToken (http://localhost:4200/vendor.js:44932:24)
    at tryResolveToken (http://localhost:4200/vendor.js:44876:16)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:4200/vendor.js:44780:20)
    at resolveToken (http://localhost:4200/vendor.js:44932:24)
    at tryResolveToken (http://localhost:4200/vendor.js:44876:16)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:4200/vendor.js:44780:20)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:61915:29)
    at _createClass (http://localhost:4200/vendor.js:61968:32)
    at _createProviderInstance (http://localhost:4200/vendor.js:61932:26)

Solution

  • After a bit of Googling (without finding the direct answer) I re-read the ngrx upgrade guide, and it had this nugget:

    Usage of forRoot is now required for StoreRouterConnectingModule

    BEFORE:

    @NgModule({
      imports: [
        StoreRouterConnectingModule
      ]
    })
    export class AppModule {}
    

    AFTER

    @NgModule({
      imports: [
        StoreRouterConnectingModule.forRoot() // <-- gotta do this
      ]
    })
    export class AppModule {}
    

    I fixed this in my AppModule, and that did the trick!

    Note to self: next time read all the parts of the migration guide.