Redux dev tools not displaying my NGRX store in Chrome/Firefox

[ghost]

Hi,

I added the @ngrx/store-devtools package to my app in the beginning of development and checked out the Redux dev tools and could see all of my NGRX store and it was fantastic. I've added a number of features to my app and have come to look at Redux and there's nothing there, just (pin):undefined.

I've created a new project and sure enough I can see the NGRX in Redux no problem. I'm at a loss as to why my actual project is not working anymore, any suggestions on how to debug this problem as I've got nothing to work with as I get no console errors and my app works perfectly without raising any exceptions.

I've obviously tried, disabling and reinstalling the extension and I've tried in both Chrome and Firefox and neither work so it's not browser specific.

I'm using a shared module imported into my app.module: -

import { NgModule, isDevMode } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { EffectsModule } from '@ngrx/effects';
import { ConfirmRegistrationStateModule } from 'src/app/state/authentication/confirm-registration/confirm-registration-state.module';
import { LoginStateModule } from 'src/app/state/authentication/login/login-state.module';
import { RequestPasswordResetStateModule } from 'src/app/state/authentication/request-password-reset/request-password-reset-state.module';
import { ResetPasswordStateModule } from 'src/app/state/authentication/reset-password/reset-password-state.module';
import { TwofactorStateModule } from 'src/app/state/authentication/two-factor/two-factor-state.module';

@NgModule({
   declarations: [],
   imports: [
      StoreModule.forRoot(),
      EffectsModule.forRoot(),
      StoreDevtoolsModule.instrument({
         maxAge: 25,
         logOnly: !isDevMode(),
         autoPause: true,
         trace: false,
         traceLimit: 75,
      }),
      LoginStateModule,
      TwofactorStateModule,
      RequestPasswordResetStateModule,
      ResetPasswordStateModule,
      ConfirmRegistrationStateModule,
   ],
})
export class SharedNgrxModule {}

[ghost]

As always after posting a question an hour two later I make progress, it's something to do with these instructions...

   providers: [
      provideStore({
         router: routerReducer,
      }),
      provideRouterStore(),
   ],

If I remove these then my state displays, I'll investigate further in the morning as I can't remember exactly why they are there other than I used them to extract route params in an effect.

[brandonroberts]

Most likely you're overriding the StoreDevtoolsModule.forRoot() providers with the provideStore(), so you should add it below

provideStore(...),
provideStoreDevtools(...)