Reducers are completely ignored in some cases with AOT

[victornoel]

I'm submitting a...

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

What is the current behavior?

This was originally reported in #147 but it was closed by #153 even though the bug discussed there wasn't fixed.

I have a complex application with ngrx 4, only one root store (feature stores), some root effects, and lazyloading via the angular router.

When using AOT, at starts everything works fine but once the application is triggering a route (the component is lazy loaded but I'm not sure it is related since the store is already fully loaded at that point…) the actions are sent and visible via the redux devtools, but no change happens to the store.
I added some logging in one of the metareducers and it's clear that it doesn't even get there.

IMPORTANT: the problem is not about AOT making the application throwing errors, but about AOT making the application fail silently! Please refrain from reporting other issues here :)

Expected behavior:

Things should work :)

Minimal reproduction of the problem with instructions:

I couldn't reproduce it on a small repro, but my application is publicly available.

$ git clone https://gitlab.com/linagora/petals-cockpit.git
$ cd petals-cockpit
$ git checkout 9994938472d2994f07fac6903f2f5735fd5a8be3
$ cd frontend
$ yarn
$ ng serve --prod -e=dev-e2e

Login with admin/admin: nothing happens!
While if you run it with ng serve -e=dev-e2e and login, it will load as expected.

Here is for the record my setup:

export const reducers: ActionReducerMap<IStore> = {
  ui: UiReducer.reducer,
  users: UsersReducer.reducer,
  workspaces: WorkspacesReducer.reducer,
  buses: BusesReducer.reducer,
  busesInProgress: BusesInProgressReducer.reducer,
  containers: ContainersReducer.reducer,
  components: ComponentsReducer.reducer,
  serviceUnits: ServiceUnitsReducer.reducer,
  serviceAssemblies: ServiceAssembliesReducer.reducer,
  sharedLibraries: SharedLibrariesReducer.reducer,
};

// if environment is != from production
// use storeFreeze to avoid state mutation
const metaReducersDev = [storeFreeze, enableBatching];

const metaReducersProd = [enableBatching];

export const metaReducers = environment.production
  ? metaReducersProd
  : metaReducersDev;

And then use them as follows:

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, { metaReducers }),
    EffectsModule.forRoot([
      WorkspacesEffects,
      BusesInProgressEffects,
      UsersEffects,
      UiEffects,
      BusesEffects,
      ContainersEffects,
      ComponentsEffects,
      ServiceAssembliesEffects,
      ServiceUnitsEffects,
      SharedLibrariesEffects,
    ]),
    // it'd be nice to have the possibility to activate redux devtools
    // even if we're in prod but only with the extension
    // since ngrx v4, no idea how to do that
    !environment.production
      ? StoreDevtoolsModule.instrument({ maxAge: 50 })
      : [],
    ...
],
  providers,
})
export class CoreModule {}

CoreModule is then imported in the main AppModule.

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

node 8, typescript 2.4, ngrx 4.0.5, angular 4.1.3 and angular-cli 1.3.1.

[victornoel]

And actually, it would be wiser to use the stable version of ngrx, because, as I told you in #153 (comment), #153 does break the build in some cases!

[maxime1992]

Also, we've tried to remove all the lazy loading in this app with @victornoel by making named functions exporting the required modules and using those functions with loadChildren but it didn't change anything. So the problem is probably not related to lazy loading

[victornoel]

I updated the description to reference the correct commit which compiles with ngrx 4.0.1

[victornoel]

I referenced the other problem in #191.

[ShiftySituation]

I've noticed a similar behavior in version 4. In my case, the reducer is only being fired for the last dispatch when there are multiple actions being dispatched from an effect. (not sure if it has to be an effect that dispatches the reducer action to cause this)

Work flow is as follows:
subscribe to the selector
dispatch Update action which is an effect that will...
dispatch UpdateSuccess action which is a reducer
subscription fires

I've added logging to verify that the Update action is dispatching the UpdateSuccess action but in the event of multiple Update actions being fired, even though each Update is dispatching the UpdateSuccess action, the logs in the UpdateSuccess action are only fired for the last UpdateSuccess action that is dispatched. It's almost like there is a debounce causing previous requests to be ignored.

[Bretto]

My AOT build is broken aswell...

[brandonroberts]

Does anyone have a small reproduction of this issue?

[ShiftySituation]

@brandonroberts you wouldn't happen to have a plunker with ngrx 4 that I can use to reproduce it, would you? I ask because all I see is version 2 in npmcdn.

[brandonroberts]

@ShiftySituation sure. Here is a plunker template http://plnkr.co/edit/tpl:757r6L

[ShiftySituation]

@brandonroberts http://plnkr.co/edit/HQ5m02PYDxeIfsG180dz?p=preview

instead of calling 'increment' reducer directly, it sends it to an effect, which then calls the 'increment' reducer. I've added a delay in the effect so the 'increment' button can be clicked multiple times and you'll notice in the logs that the reducer only fires once.

[littleStudent]

@ShiftySituation you should use a mergeMap instead of a switchMap.
if you change that in your effect (you plnkr example) it handles all actions fine.

[ShiftySituation]

@littleStudent you are 100% right... it fixed the issue in my code as well. To conclude, my issue is a non-issue and therefore not related to the original issue.

[Christian24]

I have the same problem. Coming from #250. I noticed something interesting: While my app does no longer crash with the nightly that fixes #250, the reducers function that I inject via an InjectionToken still seems to be not executed.

export function getReducers() {
  console.log("Reducers function")
  return {
    entities: entityReducer, variables: variableReducer,
    selectedVariable: selectVariableReducer,
    cost: costReducer,
    scenario: scenarioReducer, solution: solutionReducer,
    level: difficultyReducer, levels: levelsReducer,
    connectionState: connectionStateReducer, session: sessionReducer,
    message: annaMessageReducer, messages: annaMessagesReducer,
    moveVariable: moveVariableReducer
  };
}

And I provide it like so:

 {
      provide: REDUCER_TOKEN,
      useFactory: getReducers
    }

However, in my log Reducers function never appears. While when I disable AOT it does.