CODEWITHSUNDEEP
angulartypescript2.1
st_clair_clarke
st_clair_clarke

Reputation: 5715

Typescript 2.1.5 Function calls are not supported

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

Upvotes: 3

Views: 728

Answers (2)

ciekawy
ciekawy

Reputation: 2337

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 }
];

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657446

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

Upvotes: 2

Related Questions