我创建了一个函数,该函数生成动态的切换用例函数语句。

export function generateReducer(initialState, reducerName: ReducerName, adapter: EntityAdapter<any>): (state, initialState) => IState {
  reducerName.plural = reducerName.plural ? reducerName.plural : reducerName.singular + 's';

  return function (state = initialState, action: any): IState {
    switch (action.type) {

        case `[${reducerName.plural} Section] Load Statistics ${reducerName.singular}`:
        case `[${reducerName.plural} Section] Load Details ${reducerName.singular}`:
        case `[${reducerName.plural} Section] Load ${reducerName.plural}`:
            {
                return { ...state, loading: true, loaded: false };
            }
            ...
}


并像这样使用

导出常量适配器:EntityAdapter = createEntityAdapter();

export const initialState: State = adapter.getInitialState({
    loaded: false,
    loading: false,
    selectedId: null
});

export const reducer = generateReducer(initialState, { singular: 'Skill' }, adapter);


当使用ng-serve(不是AOT)运行项目时,一切正常,当尝试使用ng build --prod进行生产生产时,出现以下错误


  src \ app \ skills \ skills.module.ts(46,45)中的错误:模板期间出错
  不支持编译“ SkillsModule”功能调用
  装饰器,但在'reducers'中调用了'generateReducer'
      “减速器”参考“减速器”
        'reducers'引用src \ app \ skills \ store \ reducers \ index.ts(18,13)上的'reducer'
          'reducer'在src \ app \ skills \ store \ reducers \ skills.reducer.ts(26,24)处调用'generateReducer'。


试图找到解决此问题的任何方法,但似乎我需要以某种方式将其提供给编译器,以便他可以告诉其编译时函数以生成代码。关于如何处理此类问题的任何想法?

编辑:

添加了一个stackblitz存储库以显示错误,

https://stackblitz.com/edit/reducer-factory-ngrx

下载应用程序,更新package.json devDependencies“ @ angular / cli”:“ ^ 1.6.0”,
并尝试运行'ng build --prod'

最佳答案

尝试添加“ reducer.ts”:

  export const reducer = generateReducer(initialState, { singular: 'Skill' }, adapter);

import { ActionReducerMap } from '@ngrx/store';
import { InjectionToken } from '@angular/core';

 // register reducer token
 export const reducerToken = new InjectionToken<ActionReducerMap<State>>(
   'Registered Reducers'
 );
 Object.assign(reducerToken, reducer);

 export function getReducers() {
   return reducer;
 }


并在app.module.ts上:

import { reducerToken, getReducers } from './reducer';


@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    StoreModule.forRoot(reducerToken)
 ],
 declarations: [AppComponent, HelloComponent],
 providers: [
  {
    provide: reducerToken,
    useFactory: getReducers
  }
 ],
 bootstrap: [AppComponent]
})


这样对我有用...
希望能帮助到你

10-07 19:20
查看更多