Making AoT compatible DI

Question

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

Have you tried to replace useValue with `useFactory: () => createStore(...)`? — Estus Flask, Oct 10 '16 at 00:31
Yes, it gives me the same 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 (position 105:19 in the original .ts file)_ — Dee, Oct 10 '16 at 08:50

score 2 · Accepted Answer · answered Oct 10 '16 at 13:03

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.

I've programmed everything with Redux so I prefer the first option and it seems to be working right now. Thank you very much for your answer. I had tested by making a function reference but was using _useValue_ and not _useFactory_. I've been stuck on this for over a week now! Thanks again. :) — Dee, Oct 10 '16 at 16:22

Making AoT compatible DI

1 Answers1

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

2. Try using a more angular 2 friendly redux implementation