reducers is not being called when using --aot=true

Question

I have angular 4.4.3 project with ngrx 4.0.3 and angular-cli 1.1.2.

Everything is OK when i'm not using aot option, but when i'm using --aot=true I can see that reducers not being called (because I cannot see console output 'REDUCER FIRED'):

action:

import { Post } from '../models';
import {Action as NgRxAction} from '@ngrx/store';
export interface Action extends NgRxAction {
    payload?: any;
}
@Injectable()
export class PostActions {
    static LOAD_POSTS = '[Post] Load Posts';
    loadPosts(): Action {
        return {
            type: PostActions.LOAD_POSTS
        };
    }
    ...
    ...
}

effects:

import { AppState } from '../reducers';
import { PostActions, Action } from '../actions';
import { LoadHtmlServiceService } from '../services/load-html-service.service';
import 'rxjs/add/operator/switchMap';

@Injectable()
export class PostEffects {
    constructor(
        private update$: Actions,
        private postActions: PostActions,
        private svc: LoadHtmlServiceService
    ) { }

    @Effect() loadPosts$ = this.update$
        .ofType(PostActions.LOAD_POSTS)
        .switchMap(() => this.svc.getAllSections())
        .map(posts => this.postActions.loadPostsSuccess(posts));
    ...
    ... 
}

reducers/post-list:

import { PostActions, Action } from '../actions';
export type PostListState = Post[];
const initialState: PostListState = [];

export default function (state = initialState, action: Action): PostListState {
    console.log('REDUCER FIRED!!!!')
    switch (action.type) {        
        case PostActions.LOAD_POST_SUCCESS: {
            return action.payload;
        }
       ...
       ...
    }
}

reducers/index:

import postListReducer, * as fromPostList from './post-list';
import postReducer, * as fromPost from './post';
import userReducer, * as fromUser from './user';

export interface AppState {
    posts: fromPostList.PostListState;
    post: fromPost.PostState;
    user: fromUser.UserState;
};


export const reducers: ActionReducerMap<AppState> = {
   posts: postListReducer,
   post: postReducer,
   user: userReducer
};

app.module:

 import { reducers } from './reducers';
 import { PostEffects } from './effects';
 @NgModule({
  declarations: [
   AppComponent
 ],
  entryComponents: [AddSectionModalComponent],
  imports: [
    LayoutModule
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot([PostEffects])
  ]
...
...

Is Where something I forgot?

Thanks good ngrx peolpe

happyZZR1400 happyZZR1400 · Accepted Answer · 2017-10-26T19:14:36

finally figured out how to make my code run wit --aot:

The trick was:

defining injectionToken on reducers/index:

export const reducerToken = new InjectionToken<ActionReducerMap<AppState>>('Registered Reducers');         
Object.assign(reducerToken, reducers);

define getReducers factory(app.module):

export function getReducers() {
  return reducers;
}

when registering modules on app.module: register reducerToken and provide it in provders section:

imports:[   
   ...
   ...
   StoreModule.forRoot(reducerToken),
   EffectsModule.forRoot([PostEffects])
],
 providers: [
{
   provide: reducerToken,
   useFactory: getReducers
}

reducers is not being called when using --aot=true

1 Answers