Typescript 2.1.5 Function calls are not supported

Question

I have the following ngrx reducer function

export const raceReducer: ActionReducer<IRace> = ( state: IRace = new Race(), action?: Action ) => {
  switch ( action.type ) {

    case RaceActions.ADD_OLP:
      return ngrxStateUpdater( state, action )

    default:
      return state;
  }
};

Running the application gives the following error:

ERROR in Error encountered resolving symbol values statically. Function calls are not s upported. Consider replacing the function or lambda with a reference to an exported fun ction (position 40:50 in the original .ts file), resolving symbol raceReducer in J:/wor kspace/angular2/ts/epimss/src/app/registration/race/race.ngrx-store.ts, resolving symbo l AppModule in J:/workspace/angular2/ts/epimss/src/app/app.module.ts, resolving symbol AppModule in J:/workspace/angular2/ts/epimss/src/app/app.module.ts, resolving symbol Ap pModule in J:/workspace/angular2/ts/epimss/src/app/app.module.ts

The function referred to is the

( state: IRace = new Race(), action?: Action )

Why is this and what is the solution. I thinks this should be legitimate typescript2.1.5 code, but it does not seem that way.

Thanks

Answer 1

AoT needs to statically analyze some code and can't analyze function invocations.

For more details about the limitations of AoT see https://github.com/qdouble/angular-webpack2-starter#aot--donts

For a discussion see this issue https://github.com/angular/angular/issues/11262

Answer 2

This seems to be non trivial and as for ngrx looks like the answer is to use angular's InjectionToken to be AoT compatible. To be compliant with SO I'm shamelessly copying the solution from

https://github.com/ngrx/platform/issues/306

app.module.ts:

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { StoreModule } from '@ngrx/store'

import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { reducers, reducerToken, reducerProvider } from './reducers';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot(reducerToken),
  ],
  providers: [reducerProvider],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

reducers.ts:

import { ActionReducerMap, combineReducers } from '@ngrx/store'

import * as fromApp from './appReducers'
import * as fromNested from './nestedReducers'
import { InjectionToken } from '@angular/core';

export interface IState {
    app: {
        a: fromApp.IState,
        b: fromNested.IState,
    }
}

export const reducers = combineReducers({
    a: fromApp.reducer,
    b: fromNested.reducer,
});

export const reducerToken = new InjectionToken<ActionReducerMap<IState>>('Reducers');

export function getReducers() {
    return {
      app: reducers,
    };
}

export const reducerProvider = [
    { provide: reducerToken, useFactory: getReducers }
];