如何在独立模式下注册功能效果

Question

我试图通过天气应用程序了解 Angrx 的 Angular 17 独立组件，关于功能效果，我想在 appconfig.ts 中的 ProvideEffects 中注册效果。即使我遵循 ngrx 的官方文档，我也遇到了错误。 错误：没有与此调用匹配的重载。在provideEffects(LoadWeatherEffect)]

这是appconfig.ts

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

这是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

原来解决方案是在provideEffects中添加函数效果时调用asterisk，所以会是:

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

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