Angular app with NgRx not working properly without redux devtools extension

Question

If I have redux devtools disabled the app page is not rendering properly until I click anywhere inside the page. It does not display any error on my console.

My store module is

imports: [
    StoreModule.forRoot(reducers, { metaReducers }),
    EffectsModule.forRoot(effects),
    StoreDevtoolsModule.instrument({ maxAge: 25 }),
    // !environment.production && remote flag (dev) & authenticated ? StoreDevtoolsModule.instrument({ maxAge: 25 }) : [],
    StoreRouterConnectingModule.forRoot({
      serializer: CustomSerializer,
    }),
  ]

what errors do you receive ? – Abolfazl Roshanzamir Sep 12 '20 at 08:49 — Abolfazl Roshanzamir, Sep 12 '20 at 08:49
it doesn't display any errors on my console – joshdlcruz Sep 12 '20 at 08:53 — joshdlcruz, Sep 12 '20 at 08:53

score 4 · Answer 1 · answered Oct 19 '20 at 13:48

4

set options strictActionWithinNgZone to true (false by default). And check if you'll get error during store update. Looks like you dispatch action out of Zone.

strictActionWithinNgZone
The strictActionWithinNgZone check verifies that Actions are dispatched by asynchronous tasks running within NgZone. Actions dispatched by tasks, running outside of NgZone, will not trigger ChangeDetection upon completion and may result in a stale view.

Check it here https://ngrx.io/guide/store/configuration/runtime-checks

answered Oct 19 '20 at 13:48

Alexander Nikolenko

41
2

I confirm that by enabling the flag, errors useful to understand the problem come out. In my case there was a dispatch for the store inside a scope created with the _zoneManager.runOutsideAngular, going into error ONLY without Redux extension – Cosimo Chellini Jun 07 '21 at 09:07

Angular app with NgRx not working properly without redux devtools extension

1 Answers1