ERROR in Error during template compile of 'AppModule'

Question

Trying to build an Angular 6 app. I am getting the following error when using --prod

ERROR in Error during template compile of 'AppModule'
  Expression form not supported in 'reducers'
    'reducers' contains the error at app/app.module.ts(48,3).

app.module.ts

      import AuthEffects from './store/auth/auth.effects';
        import ContentEffects from './store/content/content.effects';
        import NavigationEffects from './store/navigation/navigation.effects';
        import ConfigEffects from './store/config/config.effects';
        
        import { ICommonAppState } from './app.state';
        import { reducer as authReducer, key as authKey } from './store/auth';
        import { reducer as configReducer, key as configKey } from './store/config';
        import { reducer as contentReducer, key as contentKey } from './store/content';
        import { reducer as navigationReducer, key as navigationKey } from './store/navigation';
        
        import { PageContainerComponent } from './page-container/page-container.component';
        import { BenefitsComponent } from './+benefits/benefits.component';
        import { NavigationComponent } from './navigation/navigation.component';
        
        const enhancers = [];
        if (!environment.production) {
          enhancers.push(StoreDevtoolsModule.instrument({ maxAge: 10 }));
        }
        
        export const reducers: ActionReducerMap<ICommonAppState> = {
          [authKey]: authReducer,
          [configKey]: configReducer,
          [navigationKey]: navigationReducer,
          [contentKey]: contentReducer,
        };
        
        const effects = [AuthEffects, ConfigEffects, NavigationEffects, ContentEffects];
        
        @NgModule({
          declarations: [AppComponent, NavigationComponent, PageContainerComponent, BenefitsComponent],
          imports: [
            BrowserModule,
            HttpClientModule,
            AppRoutingModule,
            SharedComponentsModule,
            StoreModule.forRoot(reducers),
            EffectsModule.forRoot(effects),
            ...enhancers,
          ],
          providers: [
            { provide: APP_BASE_HREF, useValue: '/content-manager/' },
            { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
            DiscoveryService,
            AuthService,
            JWTService,
            ConfigService,
            ContentService,
            NavigationService,
            TenantGuard,
            AuthGuard,
          ],
          bootstrap: [AppComponent],
        })
        export class AppModule {}

Line 48, where the error is being reported, appears to be

    export const reducers: ActionReducerMap<ICommonAppState> = {
      [authKey]: authReducer,
      [configKey]: configReducer,
      [navigationKey]: navigationReducer,
      [contentKey]: contentReducer,
    };

I am using Angular 6 with NgRX 6. I cannot understand why this is not working. I have followed the docs and my application builds just fine if I do not use the prod flag. However the build is bloated and slow, I would prefer an AOT build.

Answer 1

I also faced the same error, and in my case, it was just a typo in my module. I had one comma "," in the module's provider's array. Try to remove the comma after contentReducer from your code.

Answer 2

Had the same problem... try to use an injection token to provide the ActionReducerMap.

export const reducers: ActionReducerMap<ICommonAppState> = {
    [authKey]: authReducer,
    [configKey]: configReducer,
    [navigationKey]: navigationReducer,
    [contentKey]: contentReducer,
};
export const REDUCERS_TOKEN = new InjectionToken<ActionReducerMap<ICommonAppState>>('App Reducers');
export const reducerProvider = { provide: REDUCERS_TOKEN, useValue: reducers };

and then use it like this

  imports: [
      ...
      StoreModule.forRoot(REDUCERS_TOKEN, { metaReducers }),
      ...
  ],
  providers: [reducerProvider]

And the AOT compiler should then hopefully be able to analyze the code statically (without excecuting it).

Answer 3

or just change " [authKey]: authReducer," to 'auth': authReducer,