Error when providing ngrx effect in provideEffects() (Angular 14)

Question

When I try to provide the ngrx effect in my main.ts providers array I'm getting this error

Error: src/main.ts:18:21 - error TS2740: Type 'typeof import("/Users/macbook/IdeaProjects/angularPractice/src/app/auth/store/effects")' is missing the following properties from type 'Type<unknown>': apply, call, bind, prototype, and 5 more.

18     provideEffects([authEffects]),

This is the createEffect that I have

export const registerEffect = createEffect(
  (actions$ = inject(Actions),
   authService = inject(AuthService), 
  ) => {
    return actions$.pipe(
      ofType(authActions.register), 
      switchMap(({ request }) => {
        return authService.register(request).pipe(
          map((currentUser: CurrentUserInterface) => {
            return authActions.registerSuccess({ currentUser });
          }),
          catchError(() => {
            return of(authActions.registerFailure());
          }),
        );
      }),
    );
  },
);

Here is authActions

export const authActions = createActionGroup({
  source: 'auth',
  events: {
    Register: props<{ request: RegisterRequestInterface }>(),
    'Register success': props<{ currentUser: CurrentUserInterface }>(),
    'Register failure': emptyProps(),
  },
});

Here is authService

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(private http: HttpClient) {}

  register(data: RegisterRequestInterface): Observable<CurrentUserInterface> {
    const url = environment.apiUrl + '/users';

    return this.http
      .post<AuthResponseInterface>(url, data)
      .pipe(map((response) => response.user));
  }
}

Here is my main.ts file where I provide the useEffect

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';
import { provideState, provideStore } from '@ngrx/store';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { importProvidersFrom, isDevMode } from '@angular/core';
import { authFeatureKey, authReducer } from './app/auth/store/reducer';
import { HttpClientModule } from '@angular/common/http';
import { provideEffects } from '@ngrx/effects';
import * as authEffects from './app/auth/store/effects';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(HttpClientModule),
    provideRouter(appRoutes),
    provideStore(),
    provideEffects([authEffects]),
    provideState(authFeatureKey, authReducer),
    provideStoreDevtools({
      maxAge: 25,
      logOnly: !isDevMode(),
      autoPause: true,
    }),
  ],
});

I have absolutely no clue on why I'm receiving this error. If anyone can point me in the correct direction I would be truly grateful.

Answer 1

You need to configure the effect as a "functional effect" with { functional: true }:

export const registerEffect = createEffect(
  (actions$ = inject(Actions),
   authService = inject(AuthService), 
  ) => {
    return actions$.pipe(
      ofType(authActions.register), 
      switchMap(({ request }) => {
        return authService.register(request).pipe(
          map((currentUser: CurrentUserInterface) => {
            return authActions.registerSuccess({ currentUser });
          }),
          catchError(() => {
            return of(authActions.registerFailure());
          }),
        );
      }),
    );
  },
  // 
  { functional: true }
);

For more info see the docs at https://ngrx.io/api/effects/createEffect#functional-effects