使AoT兼容DI

时间:2016-10-09 20:44:11

标签: angular typescript dependency-injection ionic2 angular2-aot

我有一个带有角度rc4的工作项目,在将其更新为角度2.0.0

后会崩溃

我遇到以下错误:

  

在静态解析符号值时遇到错误。调用功能   'createStore',不支持函数调用。考虑更换   函数或lambda引用导出的函数,   解析符号appStore

使用此代码不再有效:

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

解决这个问题的最佳方法是什么?

这是我在app.ts中使用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 })
])

1 个答案:

答案 0 :(得分:2)

如果在createStore函数中的任何位置使用了未命名/未导出的函数,您将得到相同的错误 - 很可能就是这种情况。我认为你有两个选择:

1。尝试修改代码,希望代码中存在问题。

我会像@estus推荐的那样尝试useFactory,但你必须使用命名函数,而不是匿名函数。它必须是函数引用,而不是指向函数的const。

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

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

2。尝试使用更有棱角的2友好redux实现

我正在使用ngrx并且效果很好。 ng2-redux是另一种选择,但我没有尝试过。