Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"TypeError: Cannot read property 'release' of undefined" in ngrx store with angular only in production build

I am having anissue but only after production build at runtime. Now I am not sure if this is a bug or if I am doing a mistake. I get the error " "TypeError: Cannot read property 'release' of undefined"." in the console (browser), if I load the following feature module with ngrx (at runtime):

    import { AccountDto } from '../../../dto';
import * as fromAccountActions from '../actions/account.actions';

export interface AccountState {
  loading: boolean;
  loaded: boolean;
accountItems: AccountDto[];
}

export const initialState: AccountState = {
  loading: false,
  loaded: false,
  accountItems: []
};


export function accountReducer(
  state = initialState,
  action: fromAccountActions.AccountActions
): AccountState {

  switch (action.type) {
    case fromAccountActions.LOAD_ACCOUNT: {
      // console.log(action.type);
      return { ...state, loading: true };
    }

    case fromAccountActions.LOAD_ACCOUNT_FINISHED: {
      console.log('Finished: ' + action.payload);
      return {
        ...state,
        loading: false,
        loaded: true,
        accountItems: action.payload
      };
    }

    case fromAccountActions.LOAD_ACCOUNT_FAILED: {
      return {
        ...state,
        loading: false,
        loaded: false,
        accountItems: []
      };
    }

    default:
      return state;
  }
}

export const getAccountItems = (state: AccountState) => state.accountItems;
export const getAccountLoading = (state: AccountState) => state.loading;
export const getAccountLoaded = (state: AccountState) => state.loaded;

index.ts in reducers

import * as fromReducer from './account.reducers';
import { ActionReducerMap } from '@ngrx/store';
import { createFeatureSelector } from '@ngrx/store';

export interface AccountState {
  account: fromReducer.AccountState;
}

export const reducers: ActionReducerMap<AccountState> = {
  account: fromReducer.accountReducer
};

export const getAccountState = createFeatureSelector<AccountState>('account');

account.selectors.ts

import { createSelector } from '@ngrx/store';
import * as fromReducer from '../reducers/account.reducers';
import * as fromFeature from '../reducers';

export const getCompleteAccountState = createSelector(
  fromFeature.getAccountState,
  (state: fromFeature.AccountState) => state.account
);
export const getAccountLoading = createSelector(
  this.getCompleteAccountState,
  fromReducer.getAccountLoading
);
export const getAccountLoaded = createSelector(
  this.getCompleteAccountState,
  fromReducer.getAccountLoaded
);
export const getAllAccountItems = createSelector(
  this.getCompleteAccountState,
  fromReducer.getAccountItems
);

account.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';

import { ThirdPartyModule } from '../thirdParty/thirdParty.module';
import { SharedModule } from './../shared/shared.module';
import { AccountListComponent } from './account-list/account-list.component';
import { AccountRoutesModule } from './account.routes';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { reducers, AccountEffects } from 'app/+account/store';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    SharedModule,
    AccountRoutesModule,
    ThirdPartyModule,
    TranslateModule,
    StoreModule.forFeature('account', reducers),
    EffectsModule.forFeature([AccountEffects])
  ],

  declarations: [AccountListComponent],
  providers: [],
  exports: []
})
export class AccountModule {}

Help would be very much appreciated. Thanks

like image 370
FabianGosebrink Avatar asked Jan 16 '18 09:01

FabianGosebrink


1 Answers

I got this same error when using NgRx when I was importing files form barrel files.

When you're inside of a state feature, if you are in a file that imports one of the exports from the barrel index.ts file, you can get this error. You should be importing from the relative path when importing inside of the feature folder. Only files outside of the feature folder should use the barrel file to import things.

I didn't explicitly do the import. My IDE did it automatically. Took half a day to figure out.

like image 169
frosty Avatar answered Oct 13 '22 02:10

frosty