6

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

5
  • did you inject actions$ in your constructor ? Commented Apr 18, 2022 at 19:16
  • Edited, yes I declared actions constructor. Commented Apr 18, 2022 at 19:17
  • Extended information added. Commented Apr 18, 2022 at 21:28
  • 1
    I moved effects to constructor and it works. I have to moce all code to strict mode. Commented Apr 19, 2022 at 0:50
  • 1
    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
    – KlevisGjN
    Commented Aug 19, 2022 at 6:50

3 Answers 3

16

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:

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

3
  • 1
    this did the trick for me! Commented Sep 15, 2023 at 15:26
  • 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)
    – Tresto
    Commented Jun 7 at 18:16
  • This should be the correct answer if using Angular with ES2022
    – ppavlov
    Commented Jul 25 at 8:55
3

In angular 15, use

actions$ = inject(Actions);

when the lib is set to ES2022 in your tsconfig

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.