How I Quit My Job and Put My Belongings in the Ngrx Store-Devtools

So if you're into Angular, and you're into redux, and you're into debugging & testability, @ngrx/store-devtools might just be for you!

I ran into a really frustrating issue that came up and I figured I'd share it in case anyone else is looking for it.

Core issue

When running the app locally w/ ng serve, when inspecting in the redux devtools, I was getting the following message: "no instances found, have you followed the instructions?".

Ptsch, like...yeah...duh I have.

Except I hadn't. I was using the @ngrx/store-devtools, a 3rd-party library that supposedly just needed to be added to the app.module and you'd be able to see all of your fancy Actions flying around. But of course, I'd gotten a little too fancy trying to make things super modular, and ended up gun-footing.

Project Setup

Here's my directory structure:

src
├── app
│   ├── app.component.html
│   ├── app.component.ts
│   ├── app.module.ts
│   └── store
│       ├── details
│       │   └── report-details.reducer.ts
│       ├── index.ts
│       └── reducers.ts

The overall architecture idea was to have index.ts export the two Modules for import and usage in the app.module.
like this:

/* src/app/store/index.ts */

export * from './reducers';

/* src/app/store/reducers.ts */

// Assigns part of the state to a particular reducer
import { StoreModule } from '@ngrx/store';
import { reportDetailsReducer } from './details/report-details.reducer';

export const Reducers = StoreModule.forRoot({
  reportDetails: reportDetailsReducer
});

/* src/app/app.module.ts */

import { NgModule } from '@angular/core';
import { Reducers } from './store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { environment } from '../environments/environment';
// removed some code for clarity
@NgModule({
  imports: [
    StoreDevtoolsModule.instrument(), <----
    Reducers
  ],
  // ...providers
  bootstrap: [AppComponent]
})
export class AppModule { }

The Problem

When you run something like above, it would display that sad message, even though it looks like it should work. The issue was that you need to instrument the Devtools after the StoreModule.forRoot() call, since otherwise it doesn't know what to latch onto.

Corrected:

/* src/app/app.module.ts */

import { NgModule } from '@angular/core';
import { Reducers } from './store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { environment } from '../environments/environment';
// removed some code for clarity
@NgModule({
  imports: [
    Reducers,
    StoreDevtoolsModule.instrument(), <----
  ],
  // ...providers
  bootstrap: [AppComponent]
})
export class AppModule { }

Fin.

-CL