How to use ngrx’s combineReducers in Ahead-of-Time (AOT) Compiler?

A problem I got: I got this angular app. I use ngrx’s combineReducers function in some of my state reducers; however, I realize my app failed to build in the production environment.

This is what my setup looks like:

export function userId(state: string, action: SetUserId): string {

export function likedPostIds(state: Set<string>, action: any): Set<string> {

export const userReducer = combineReducers({ userId, likedPostIds });

This is what my root reducer looks like:

export const reducers: ActionReducerMap<AppState> = {
router: routerReducer,
language: languageReducer,
user: userReducer

This is how I set up the ngrx store in app.module:

StoreModule.forRoot(reducers, { metaReducers, initialState: initialAppState }),

The app runs fine locally. However, when I run ng build --prod, it failed with below messages:

ERROR in app/app.module.ts(34,25): Error during template compile of 'AppModule'Function calls are not supported in decorators but 'combineReducers' was called in 'reducers''reducers' references 'userReducer' at app/store/app.reducer.ts(17,9)'userReducer' calls 'combineReducers' at app/store/user/user.reducer.ts(28,28).

So apparently combineReducers does not work in AOT. What are some of the ways of getting around?

Use dependency injection:

export const REDUCER_TOKEN = new InjectionToken<ActionReducerMap<AppState>>('root reducer');@NgModule({
declarations: [...],
imports: [
StoreModule.forRoot(REDUCER_TOKEN, { metaReducers, initialState: initialAppState })
providers: [
useValue: reducers

I create an injection token named REDUCER_TOKEN and provides the value with the root reducer I current have.

Now no more errors, my build runs fine in the production environment.

A frontend web developer in Toronto

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store