'NgRx Angular App not working with Redux DevTools

So I'm following this tutorial to get familiar with ngRx Entity, and for some reason my redux dev tools isn't 'lighting up' to indicate that it's in an app that is using redux, and the data I want to show up in the dev tools isn't showing up. The data showing up on the log monitor is this:

enter image description here

If I had to guess I would say it's some default data maybe?? I've also made sure that it's connected to my local host at the right port so I don't think that's the problem either.

I've troubleshot in the following ways:

  1. Moving the storeDevToolsModule before the storeModule for root in the root module like this:
StoreDevtoolsModule.instrument({
      maxAge: 25,
    }),
    StoreModule.forRoot(reducers),

  1. I've used different browsers, and have enabled access to local URLs. [My Default Browser is Brave, and I troubleshot with Chrome].

  2. I also instantiated a new react app with redux baked in and that worked fine, and the extension lit up and it detected the local store, so I don't think it's the extension.

I've looked for the past few days for resources that go over troubleshooting redux dev tools with angular & ngRx and have no idea what to do anymore. Any help or direction would be greatly appreciated



Solution 1:[1]

So make sure that ngrx is installed using the ng add syntax when you plan on using it in the project. using npm install @ngrx/store @ngrx/entity gave me problems. So it started working when I typed ng add @ngrx/store @ngrx/store-devtools @ngrx/entity

Solution 2:[2]

Make sure you import all modules from the store first before importing the StoreDevtoolsModule in the list of imports.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sonny Vesali
Solution 2 KIMBOH LOVETTE