how to Register functional Effects in standalone

Question

i'm trying to understand ngrx on angular 17 standalone components throught a weather app, on functional effects i want to register the effect in the provideEffects in appconfig.ts. I got an error even i'm following the official docs of ngrx. the error : No overload matches this call. in provideEffects(LoadWeatherEffect)]

this is the appconfig.ts

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideHttpClient(withFetch()), provideStore({ books: booksReducer, collection: collectionReducer, weather:weatherReducer }), provideEffects(LoadWeatherEffect)]
};

this is the functional effect inside weather.effects.ts

import { inject } from "@angular/core";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { WeatherService } from "../../services/weather.service";
import { WeatherApiAction } from "./weather.actions";
import { catchError, exhaustMap, map, of } from "rxjs";


export const LoadWeatherEffect = createEffect(
    (actions$ = inject(Actions), weatherService = inject(WeatherService)) => {
        return actions$.pipe(ofType(WeatherApiAction.loadingWeather),
            exhaustMap(() =>
                weatherService.getCurrentWeather().pipe(map((weather) => WeatherApiAction.loadWeatherSuccess({ weather })),
                catchError((err:{message:string})=>of (WeatherApiAction.loadWeatherError({error:err.message})))
                )
            ),
        )
    },
    { functional: true }
)

Answer 1

Turns out the solution is to call asterisk when adding the function effect in the provideEffects, so it will be :

import * as weatherEffect from './state/weather-state/weather.effects';
import { provideAnimations } from '@angular/platform-browser/animations'

export const appConfig: ApplicationConfig = {
  providers: [....,
    provideEffects(weatherEffect), ...]
};