ngrx error "Module '"@ngrx/effects"' has no exported member 'Effect'"

January 5, 2023

I trying to implement an effect in ngRx. I import ted "Effect" from "@ngrx/effects", but It showing the error "Module ‘"@ngrx/effects"’ has no exported member ‘Effect’.ts(2305)"

 import { Actions, ofType, Effect } from "@ngrx/effects";
 import { switchMap } from "rxjs/operators";

 import * as AuthActions from './auth.actions';

 type loginResponse = { token: string, message: string, loggedIn: boolean, time: number };

 export class AuthEffects {
    @Effect
    login = this.actions$.pipe(
        ofType(AuthActions.LOGIN),
        switchMap((authData: AuthActions.Login) => {
            return this.http
                .post<loginResponse>(
                    'http://localhost:3000/user/signup',
                    { 
                       email: authData.payload.email, 
                       password: authData.payload.password 
                    }
                )
        })
    )
    constructor(private actions$: Actions, private http: HttpClient) { }
}

I’m trying to implement a login system using an effect in ngRx. I imported "Effect" from "@ngrx/effects", but It showing the error "Module ‘"@ngrx/effects"’ has no exported member ‘Effect’.ts(2305)"

>Solution :

It looks like you are trying to use the @Effect from the @ngrx/effects library, but the error message you shared showing that there is no exported member named Effect in the @ngrx/effects module.

i think it’s because of this error is that you are using an older version of the @ngrx/effects library. In version 8 the Effect decorator was modified to createEffect function.

it will look something like this:

import { Actions, ofType, createEffect } from '@ngrx/effects';
import { switchMap } from 'rxjs/operators';
import { AuthActions } from './auth.actions';

type loginResponse = { token: string, message: string, loggedIn: boolean, time: number };

export class AuthEffects {
  login$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AuthActions.LOGIN),
      switchMap((authData: AuthActions.Login) => {
        return this.http
          .post<loginResponse>(
            'http://localhost:3000/user/signup',
            { 
              email: authData.payload.email, 
              password: authData.payload.password 
            }
          )
      })
    )
  );

  constructor(private actions$: Actions, private http: HttpClient) {}
}```