Platform: Redux devtools not being connected to the store.

[mnemanja]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[x] Support request

What is the current behavior?

I've followed these 2 guides:
https://github.com/ngrx/platform/blob/master/docs/store/README.md
https://github.com/ngrx/platform/blob/master/docs/store-devtools/README.md
After the implementation the Redux plugin returns this message: No store found. Make sure to follow the instructions.

Expected behavior:

The expected behavior is for the plugin and the store to be connected through the @ngrx/store-devtools module.

Minimal reproduction of the problem with instructions:

I have two examples where it doesn't work. One is the app that I'm building, and the second one is the clean slate app generated just for purpose of testing this.
This is my app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpModule} from '@angular/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdDialogModule, MdIconModule, MdInputModule} from '@angular/material';

import 'hammerjs';

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { StoreModule } from '@ngrx/store';

import {AppComponent} from './app.component';

import {ForecastComponent} from './forecast/forecast.component';
import {ForecastService} from './forecast/forecast.service';
import {HandleLocationDialogComponent} from './handle-location-dialog/handle-location-dialog.component';

import { forecast } from './forecast/forecast.reducer';


@NgModule({
  declarations: [
    AppComponent,
    ForecastComponent,
    HandleLocationDialogComponent,
  ],
  imports: [
    StoreModule.forRoot({forecast}),
    StoreDevtoolsModule.instrument({
      maxAge: 25 //  Retains last 25 states
    }),

    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MdButtonModule,
    MdIconModule,
    MdDialogModule,
    MdInputModule,
  ],
  providers: [ForecastService],
  bootstrap: [AppComponent],
  entryComponents: [HandleLocationDialogComponent]
})
export class AppModule { }

And my reducer

import { Action } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

export function forecast(state: number = 0, action: Action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;

    case DECREMENT:
      return state - 1;

    case RESET:
      return 0;

    default:
      return state;
  }
}

In the second example, the reducer is the same:
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { StoreModule } from '@ngrx/store';

import { forecast } from './forecast.reducer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    StoreModule.forRoot({forecast}),
    StoreDevtoolsModule.instrument({
      maxAge: 25 //  Retains last 25 states
    }),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Version of affected browser(s),operating system(s), npm, node and ngrx:

Chrome latest
Win 10
Node v7.7.2
npm v5.3.0
"@ngrx/core": "^1.2.0",
"@ngrx/store": "^4.0.2",
"@ngrx/store-devtools": "^4.0.0",

[brandonroberts]

You need to remove @ngrx/core from your project completely. Its no longer required and causes issues. See https://github.com/ngrx/platform/blob/master/MIGRATION.md

[mnemanja]

@brandonroberts
Hi Brandon, thanks for the quick reply.

I haven't upgraded anything. This is a clean and up to date framework.
"@angular/cli": "^1.2.7", and angular 4.3.3.

This is my current usage of @ngrx/core:

import {NgModule} from '@angular/core';

@NgModule({
  declarations: [
    AppComponent,
    ForecastComponent,
    HandleLocationDialogComponent,
  ],
...

If I would to remove it, how would I then obtain the NgModule?

From the migration document, I can see that I should replace the implementation of the compose, but I'm not using import { compose } from '@ngrx/core/compose'; as you can see from the example I've added.

Where did you have in mind to remove the @ngrx/core from?

Thanks!

[brandonroberts]

If you're starting fresh you don't need to remove @ngrx/core. What version of the Redux devtools plugin are you using?

[mnemanja]

"@ngrx/store": "^4.0.2",
"@ngrx/store-devtools": "^4.0.0",

[dragGH102]

same issue here. similar set up. found any workaround?

[mnemanja]

Unfortunately not, I've stopped the development of that application.

[brandonroberts]

Are you injecting the Store into any components in your AppComponent? The Devtools won't activate until the store is instantiated

[dragGH102]

@brandonroberts yes, I did. and the app works.

As you said Devtools won't activate immediately but this is being a problem when doing remote debugging as I have no way to refresh dev tools as on Desktop (and of course store not found).

Any clue?

[brandonroberts]

Devtools doesn't currently work with remote debugging. There is a workaround here from 2.x https://github.com/ngrx/platform/issues/342#issuecomment-326763377

[dragGH102]

any plan to implement it?
also, any alternative?
I saw there is https://github.com/zalmoxisus/remote-redux-devtools but not
idea how to set it up

On Sep 21, 2017 9:06 PM, "Brandon" [e-mail] wrote:

Devtools doesn't currently with remote debugging. There is a workaround
here from 2.x #342 (comment)
https://github.com/ngrx/platform/issues/342#issuecomment-326763377

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ngrx/platform/issues/245#issuecomment-331251901, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AFLdFjZdbx2JDoUT3H37JHG3eKrCPishks5skrOdgaJpZM4Ov2R7
.

[arleta-jedrzejczak]

I had the same issue and I found the solution that works for me: it's important to set your StoreDevtoolsModule AFTER StoreModule.forRoot