Using ActionReducerMap with StoreModule.forFeature gives build error

Question

I have my angular project structure as below:

/(root or repo folder)
 |_ projects
    |_ mylib (this is the main library that will be exported from the repo)
    |_ sample-app (created to consume 'mylib ' project to test that things work fine when 'mylib' would be consumed in other projects)

To handle application state I am using ngRx (of which I have only basic knowledge). The project is setup with Angular8.2.5, ngRx 8.3.0 and RxJs 6.5.3.

On doing npm start on the repo, sample-app project is bootstrapped and mylib project is lazily loaded.

Here is how I have initialized the app store/state

In sample-app/app.module.ts (inside sample-app project)

StoreModule.forRoot({}, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictStateSerializability: true,
        strictActionSerializability: true,
      },
    }),
!environment.production ? StoreDevtoolsModule.instrument({ name: 'My Sample App' }) : [],

In mylib/mylib.module.ts (inside mylib project)

import { libReducer} from './shared/store/lib.store';
StoreModule.forFeature('libState', libReducer)

The libReducer is exported from mylib/shared/store/lib.store.ts file

export interface subFeatureOneState {
    // some properties defined here
}

export interface LibState {
  subFeatureOneReducer: subFeatureOneState;
}

export const libReducer: ActionReducerMap<LibState> = {
  subFeatureOneReducer,
};

The only issue I am getting with this setup is that I get an error when I try to build my project( using ng build).

The error says

Checking the logs doesn't provide much help either.

The build issue gets resolved if I change StoreModule.forFeature definition in mylib.module.ts to below

StoreModule.forFeature('libState', subFeatureOneReducer)

But this is not what I desire as I intend to keep all my reducers at one place and just have one reference of StoreModule.forFeature inside mylib project.

I couldn't find much articles online that explain usage of ActionReducerMap for a feature module store. I followed the approach mentioned below, but it didn't solved the build failure issue: @ngrx/store combine multiple reducers from feature module

Is there something wrong with the way I have configured store/reducers to be initialized? It would be great if I can get any pointers on this to solve the build error issue.

@TonyNgo: Thanks for taking a look at this and sharing your feedback. I added the reference of ROOT_REDUCERS and StoreRouterConnectingModule.forRoot() in app.module.ts but still the build fails. I took a look at your code as well and there the StoreModule.forFeature points directly to the reducer and not an ActionReducerMap. I am suspecting providing reference of ActionReducerMap in StoreModule.forFeature is causing problem for me. If I directly add the reference of reducer, it works. Any further pointers? — Kaashan, Oct 02 '19 at 11:41
I think you having the problem when using ActionReducerMap in your feature module. Can you share your code with me on github ? — Tony Ngo, Oct 04 '19 at 06:54

score 1 · Answer 1 · answered Oct 02 '19 at 06:33

Here is my code I think you are missing the ROOT_REDUCERS

export const ROOT_REDUCERS = new InjectionToken<
  ActionReducerMap<State, Action>
>("Root reducers token", {
  factory: () => ({
    router: fromRouter.routerReducer
  })
});

StoreModule.forRoot(ROOT_REDUCERS, {
    metaReducers,
    runtimeChecks: {
    strictStateImmutability: true,
    strictActionImmutability: true
    }
}),

Here is my full code for your reference

Using ActionReducerMap with StoreModule.forFeature gives build error

1 Answers1