[AOT] ngc: Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule

[jasonwaters]

Hi! I recently upgraded to the 2.0.0 release version of Angular 2. I'm getting this error from ngc:

ngc: Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule

I believe it has to do with this code in the NgModule definition:

StoreModule.provideStore(
        compose(
            localStorageSync(['todos']),
            combineReducers
        )({todos, visibilityFilter})

if I change it to this...

StoreModule.provideStore({todos, visibilityFilter})

it works fine. If I attempt to do what the error says, and replace the function with a reference to an exported function it still does not work:

import { Store, StoreModule } from '@ngrx/store';
import { todos, visibilityFilter } from './reducers';
import { NgModule } from '@angular/core'

export const reducers = compose(
            localStorageSync(['todos']),
            combineReducers
        )({todos, visibilityFilter});

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.provideStore(reducers)
  ]
})
export class MyAppModule {}

Do you have any ideas?

[jasonwaters]

Never mind, here's how the ngrx example app works around it:

https://github.com/ngrx/example-app/blob/master/src/app/reducers/index.ts#L82

[btroncone]

@jasonwaters Sorry for the delay, glad you worked it out! 👍

[mxii]

@jasonwaters could you show your working code please? :)
Struggling with the same problem..

[jasonwaters]

@mxii no problem.

It's basically this bit from the code I linked to:

app.module.ts

@NgModule({
	declarations: [...pages, ...components, ...pipes],
	imports: [
		StoreModule.provideStore(reducer),
		IonicModule.forRoot(MyApp)
	],
	bootstrap: [IonicApp],
	entryComponents: [...pages, ...components],
	providers: [
		...services,
		{provide: ErrorHandler, useClass: IonicErrorHandler}
	]
})
export class AppModule {}

app.reducers.ts

const reducers = {
  search: fromSearch.reducer,
  books: fromBooks.reducer,
  collection: fromCollection.reducer,
  layout: fromLayout.reducer,
  router: fromRouter.routerReducer,
};

const developmentReducer: ActionReducer<State> = compose(storeFreeze, combineReducers)(reducers);
const productionReducer: ActionReducer<State> = combineReducers(reducers);

export function reducer(state: any, action: any) {
  if (environment.production) {
    return productionReducer(state, action);
  }
  else {
    return developmentReducer(state, action);
  }
}

[mxii]

But where to put this part localStorageSync(['todos'], true)?

[jasonwaters]

@mxii oh, right. actually my productionReducer and developmentReducer look like this:

const developmentReducer: ActionReducer<State<any>> = compose(
	storeFreeze,
	localStorageSync(['reducerName1', 'reducerName2'], true),
	storeLogger({
		level: 'info',
		collapsed: true,
	}),
	combineReducers)(reducers);

const productionReducer: ActionReducer<State<any>> = compose(
	localStorageSync(['reducerName1', 'reducerName2'], true),
	combineReducers)(reducers);

hope it helps

[mxii]

Great, thanks!

[jrmcdona]

@jasonwaters I am getting this error

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: localStorage is not defined
at Object.exports.localStorageSync (C:\Users\jordanmc\Source\Repos\Xbox.Ambassadors\Microsoft.Ambassadors.Admin\Microsoft.Ambassadors.Admin\node_modules\ngrx-store-localstorage\dist\index.js:104:41)

I don't see what you are using for the localStorage argument? I believe that is why this is failing.

[jasonwaters]

@jrmcdona where are you seeing this error? It looks like you are trying to execute the code within node? Node does not have a native localStorage implementation, you could consider using a shim such as node-localstorage.

[jrmcdona]

I am seeing the error in my Angular / .NET Core MVC app when running locally.

Perhaps that is the issue, because of node. I will try node-localstorage and see how that goes.

Tried this but it failed to install and isn't maintained.
https://github.com/marcj/angular2-localstorage

[ciekawy]

I believe this is worth sharing ngrx/platform#306 - it suggests to use InjectionToken to deal with the AoT issue