reducers are not called when using --prod flag

[morhi]

hello :)

I try to migrate my ngrx store to v4 and I have an issue when using the --prod flag with ng serve or ng build.

The store is splitted up in directories of modules and I bundled the store imports into a separate NgModule. The StoreModule is then imported in the AppModule.

./store/index.ts

import { StoreModule as NgrxStoreModule, ActionReducerMap } from '@ngrx/store';
import pet from './pet/reducer';

export const reducers: ActionReducerMap<RootState, actions> = {
  pet: pet
};

@NgModule({
  imports: [
    NgrxStoreModule.forRoot(reducers, RootInitialState),
    environment.devTools ? StoreDevtoolsModule.instrument({maxAge: 50}) : [],
    EffectsModule.forRoot([
      PetEffects
    ])
  ]
})
export class StoreModule {}

./store/pet/reducer.ts

import { PetState } from './state';
import * as actions from './actions';

export default function reducer(state: PetState, action: actions.Actions): PetState {
  switch (action.type) {
    // ...
  }
}

However, the problem is that in production mode the reducers are not called. I can see the actions dispatched but the state is not changed. In development mode everything works fine. The console does not throw any errors or warnings. I hope that one of you has an idea how to fix it :)

I am using node v8.1.4 and @ngrx/store v4.0.0

[victornoel]

I'm facing the same problem, actually some reducers are called at the beginning, then after not.
Surprisingly, I use almost the same configuration than you.

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.

[victornoel]

Note also than the effects are triggered.

[morhi]

I found the issue in my case! :)

The reason is that I used a named exported default function in ./stores/pet/reducer.ts like:

export default function reducer()

I removed the default export and changed it to

export function reducer()

and imported it like

import { reducer } from './pet/reducer'

[victornoel]

@morhi that wasn't my problem, and even though you found a workaround, there is still something wrong. Would you be kind enough to reopen this issue? Thanks :)

[morhi]

sure :) Unfortunately I don't have any idea for your issue right now..

[Kaffiend]

@victornoel i imagine its an edit of the code after pasting, but why is the CoreModule in backticks in your code block?
I suspect you may be hitting some lazy loaded module issues. Have you tried implementing static forRoot() method on the CoreModule and calling it when you import the module to your AppModule with CoreModule.forRoot() ?
similar to the example app

[maxisam]

@victornoel You might wanna check #116

[victornoel]

@morhi thanks :)
@Kaffiend yes, I suspect there is some link with lazyloading, even though all the reduces are loaded without lazyloading, the problem arises once the first lazyloaded module is loaded. I will experiment with your suggestion!
@maxisam I thought at first there would be some link, but after trying all the workaround discussed there, this didn't fix my problem. And I don't see the same symptoms. I suppose there is still some link, lots of stuffs seems broken in relation to AOT in ngrx4.

Thanks all for the ideas, I will report on workaround if I find one and let's keep this open to track the problem until it is fixed for real :)

[victornoel]

@Kaffiend suggestion didn't help unfortunately :/

[maxisam]

@victornoel Did you try the Object.assign hack mentioned in #116? That was the key to fix my AOT issue.

[victornoel]

@maxisam yes, I did. Actually, if I don't use it, I see the bug of #116 (the errors), if I use it, then I don't see any errors but the reducers are not triggered as expected (i.e., this bug).
I don't think they are the same thing :)

[brandonroberts]

Can someone reproduce this in a repo? It would help us diagnose the problem if there is one

[victornoel]

@brandonroberts this project with this branch reproduces the problem: https://gitlab.com/linagora/petals-cockpit/tree/front/update-deps
Simply enter the frontend folder, run yarn once, then ng serve --prod -e=dev-e2e and then try to login with admin/admin, nothing happen. You can compare to the working situation with ng serve -e=dev-e2e.
In the meanwhile, I will try to repro via a smaller/simpler application, but I'm not sure I will succeed :)

[victornoel]

I couldn't make a repro and now I won't have the time, sorry, I hope the repo I gave you will be enough :)

[victornoel]

@MikeRyanDev could you please reopen? I don't think this PR solve this issue as discussed on the PR…

[brandonroberts]

@victornoel can you open a new issue for this? I don't think the issue with the reducer factories applies to your situation

[victornoel]

@brandonroberts here it is #189, I reproduced the problem with latest nightly that contains #153.

[JHinW]

have you checked if build your app with ng build --prod --aot=false --build-optimizer=false,
if the outputs works fine, it should be angularcli's issue .