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

Bechler

did you inject actions$ in your constructor ? – Rivet

Edited, yes I declared actions constructor. – Bechler

Extended information added. – Bechler

I moved effects to constructor and it works. I have to moce all code to strict mode. – Bechler

I don't understand why, (maybe any change in versions) because my code was working but moving effect inside constructor as @UlandNimblehoof suggested, it is working. :O – Volume

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.

Epimorphosis

this did the trick for me! – Lynching

I spent quite a bit of time on this, and this is the only thing that worked. Thank you so much. (using Angular 15.2 and es2022) – Stickpin

This should be the correct answer if using Angular with ES2022 – Scamander

Answer 2

In angular 15, use

actions$ = inject(Actions);

when the lib is set to ES2022 in your tsconfig

Lynettelynn

Answer 3

I fixed this problem by updating my tsconfig.json file to reference ES2020 instead of ESNEXT.
tsconfig keys

After this update, in my effects file, I have my createEffect methods outside the constructor and it's working for me.

Hercules