After deploying my application and running it, I encountered an issue that seems to be happening only during production build at runtime. At this point, I am uncertain whether this is a bug or if there is a mistake in my code. The error "TypeError: Cannot read property 'release' of undefined" appears in the browser console when loading a specific feature module with ngrx:
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;
The index.ts file 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 {}
Your assistance on this matter would be greatly appreciated. Thank you.