Redux DevTools are sometimes disabled

Question

I am developing app using Angular 5 + NgRx. I have the browser extension Redux DevTools installed (for both Chrome and Firefox). But both extensions are disabled (icon is gray and does not show store history)

My app has several modules, which are loaded asynchronously. The main app.module.ts contains this code

StoreModule.forRoot({
 user: userReducer
})

and the other module has this

StoreModule.forFeature('dashboard', dashboardReducer),
StoreModule.forFeature('globalSettings', globalSettingsReducer),
StoreModule.forFeature('userInfo', userSettingsReducer),

The result is that the Redux DevTools extension is disabled. No related error reported in the console whatsoever. What am I doing wrong? I can't get it to work and I am getting frustrated.

When I changed it to this (obviously wrong) code, then interestingly DevTools started to work again, but other things broke (as expected)

StoreModule.forRoot({
 'dashboard': dashboardReducer,
 'globalSettings': globalSettingsReducer,
 'userInfo': userSettingsReducer
}), 

I do need the DevTools to work, because it helps me to better thing/visualize the current state of the app. Also without Redux DevTools and time traveling debugging, the whole Redux approach seems to me like writing too much boilerplate. When the tooling ecosystem works, then it is great, but when it breaks, then all I have is more boilerplate code (reducers, actions, etc).

Why Redux DevTools wont start? Why doesn't it report any error to console? How to make it work again?

PS: I am not using the npm package for Redux DevTools, I am using the raw store as provided by @ngrx/store. It used to work fine, until I've added the .forFeature() call.

Please advice

Answer 1

Aaaah, so the solution is to initialize StoreDevtoolsModule in the MAIN module (usually called app.module). If you initialize it in some other module, which is loaded later, then it will behave in absurdly weird ways (see my original question)

So the solution was to move StoreDevtoolsModule.instrument({ maxAge: 25 }) from async loaded module to the main app.module. After that it works like a charm again.

But for me, as a newbie on this project, when the DevTools has already been setup before, it was totally not obvious, why it suddenly stopped working.