Dee Dee - 1 month ago 37
TypeScript Question

Making AoT compatible DI

I had a working project with angular rc4 which is breaking down after updating it to angular 2.0.0

I'm having the following error:


Error encountered resolving symbol values statically. Calling function
'createStore', function calls are not supported. Consider replacing
the function or lambda with a reference to an exported function,
resolving symbol appStore


With this code which is no longer working:

//Redux - ReduxThunk - rootReducer
import { Store, createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import { rootReducer } from '../modules/rootReducer';

const appStore = createStore(
rootReducer,
applyMiddleware(ReduxThunk)
)

@NgModule({
...
providers: [
{ provide: 'AppStore', useValue: appStore }
]
})


What's the best way to solve this?

This is the file I had for the root component in app.ts with angular rc4

import { Component, provide } from '@angular/core';
import { Platform, ionicBootstrap } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

//For Navigation
import { TabsPage } from './pages/tabs/tabs';

//Redux
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import rootReducer from './modules/rootReducer';

const appStore = createStore(
rootReducer,
applyMiddleware(ReduxThunk)
);

@Component({
template: `<ion-nav [root]="tabsPage"></ion-nav>`
})

export class MyApp {

private tabsPage: any;

constructor(
private platform:Platform,
@Inject('AppStore') private appStore: any
) {
});

this.tabsPage = TabsPage;

platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}

ionicBootstrap(MyApp, [
provide('AppStore', { useValue: appStore })
])

Answer

You'll get that same error if there are unnamed/unexported functions used anywhere inside the createStore function - which very well may be the case. I think you have two choices:

1. Try modifying your code in the hopes that the problem is in your code.

I would try useFactory like @estus recommended, but you have to use a named function, not an anonymous one. And it has to be a function reference, not a const pointing to a function.

export function appStore() {
  return createStore(
    rootReducer,
    applyMiddleware(ReduxThunk)
  );
}

@NgModule({
...
  providers: [
    { provide: 'AppStore', useFactory: appStore }
  ]
})

2. Try using a more angular 2 friendly redux implementation

I'm using ngrx and it works well. ng2-redux is another option, but I haven't tried it.