Typescript Angular NGRX/Effects actions$.pipe() undefined

Question

Hello I have issue with ngrx/effects - pipe undefined. Below I attached sample code which is correct along compilator but browser shows undefined pipe error.

constructor(
    private actions$: Actions,
    private ethereumService: EthereumService
) { }

loadUser$ = createEffect(() =>
    this.actions$.pipe(
        ofType(loadAccountState),
        mergeMap(() => this.ethereumService.getAccountDetails()
            .pipe(
                map(setAccountStateCompleted),
                catchError(() => EMPTY)
            )
        )
    )
);

AppModule:

StoreModule.forRoot(reducers),
EffectsModule.forRoot([AccountEffects]),

EDIT: Even this sample has same error -_-

logActions$ = createEffect(() =>
    this.actions$.pipe(
        ofType(AccountActions.loadAccountState),
        tap(action => console.log(action))
    ), { dispatch: false });

PS2. I am using ActionReducerMap which is main reducer file imported to Root as reducers

import {
  createSelector,
  createFeatureSelector,
  ActionReducerMap,
} from '@ngrx/store';

import * as fromAccount from './account.reducer';

export interface State {
  account: fromAccount.State;
}

export const reducers: ActionReducerMap<State> = {
  account: fromAccount.updateAccountReducer,
};

export const selectAccountState = createFeatureSelector<fromAccount.State>('account');

//Account Selectors
export const selectCurrentUser = createSelector(
  selectAccountState,
  fromAccount.selectActiveAccount
);

What is wrong with my code, please for help

Answer 1

Depending how the $actions is declared the generated code might change when you set target ES2022 or newer.

Quick fix - add this to your tsconfig.json:

"compilerOptions": {
  {
    // ...
    "useDefineForClassFields": false
    // ...
  }
}

For future you might want to refactor class initialization and avoid this flag.

More info:

• https://www.typescriptlang.org/tsconfig#useDefineForClassFields
• https://angular.schule/blog/2022-11-use-define-for-class-fields

This issue can also happen when switching compiler target to ES2022 and some Jest tests fail just because of that.