NGRX angular 5 reducer with AOT compiler

Question

I'm having difficulty rewriting the NGRX store from JIT compiler to AOT compiler. The const accountReducer should be an exported function, but i can't figure it out how to fix it.

Is there a simple rewrite example, or could anyone help me out on this?

error

'accountReducer' contains the error at app/store/account/account.reducer.ts(19,64) Consider changing the function expression into an exported function.

I have the following setup:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { LOCALE_ID, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

// NGRX store
import { StoreModule,   ActionReducer } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { rootReducer } from 'store';

// Core
import { environment } from 'environments/environment';
import { AppComponent } from './app.component';

// Routes
import { AppRoutingModule } from 'routes';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        StoreModule.forRoot(rootReducer), !environment.production ? StoreDevtoolsModule.instrument({
            maxAge: 10,
        }) : [],
        AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

root.reducer.ts

import { ActionReducerMap } from '@ngrx/store';
import { routerReducer } from '@ngrx/router-store';

import { initialAccountState, accountReducer } from './account/account.reducer';
import { AccountInterface } from './account/account.interface';

export interface StateInterface {
    account: AccountInterface;
    router: any;
}

// Store root state
export const InitialState = {
    account: initialAccountState,
};

// Store root reducer
export const rootReducer: ActionReducerMap<StateInterface> = {
    account: accountReducer,
    router: routerReducer,
};

account.reducer.ts

import { ActionReducer, Action } from '@ngrx/store';
import { tassign } from 'tassign';

import { saveState, rehydrateState, rehydrateAction } from 'helpers';
import { DefaultAction } from 'interfaces';

import { AccountConstants } from './account.constants';
import { AccountInterface } from './account.interface';

export const initialAccountState: AccountInterface = {
    account: null,
    hash: {
        isLoading: true,
        isAccepted: false,
    },
    isLoggedIn: false,
};

export const accountReducer: ActionReducer<AccountInterface> = (state: AccountInterface = initialAccountState, action: DefaultAction) => {
    const { type, payload } = action;
    let newState: any = state;

    switch (type) {
        case AccountConstants.ACTION_ACCOUNT_LOGOUT_ACCOUNT:
            newState = tassign(initialAccountState);
            break;

        case AccountConstants.ACTION_HASH_DENIED:
            newState = tassign(state, {
                hash: {
                    isLoading: false,
                    isAccepted: false,
                },
            });
            break;

        case AccountConstants.ACTION_HASH_ACCEPTED:
            newState = tassign(state, {
                hash: {
                    isLoading: false,
                    isAccepted: true,
                },
            });
            break;

        // Optional: if the state requires saving storage.
        case rehydrateAction:
            const rehydratedState = rehydrateState('account');
            newState = tassign(state, rehydratedState);
            break;
    }

    // If it's not default init.
    if (type !== rehydrateAction) {
        // Save the whole store, keys or whatever you want :-)
        saveState('account', newState);
    }
    return newState;
};

Answer 1

Change the reducer declaration to a function:

export function accountReducer(
    state: AccountInterface = initialAccountState,
    action: DefaultAction) {
     ...
}

The way you have it written used to work but needs to be updated to the above for new versions.

If you upgrade from NgRx before version 4 this migration could be useful.