Angular 17独立组件注册NgRx函数式Effect报错求助

问题场景 #

在Angular 17独立组件项目中，尝试在appconfig.ts的provideEffects中注册函数式Effect时，触发No overload matches this call错误，报错位置为provideEffects(LoadWeatherEffect)。

解决方案 #

核心问题是provideEffects的参数类型不匹配，函数式Effect需要以对象形式传递，而非直接传入单个Effect实例。

修改appconfig.ts中的provideEffects调用：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(withFetch()),
    provideStore({ 
      books: booksReducer, 
      collection: collectionReducer, 
      weather: weatherReducer 
    }),
    provideEffects({ LoadWeatherEffect }) // 用对象包裹单个Effect
  ]
};

原因说明 #

在NgRx 17+版本中，provideEffects针对函数式Effect的重载要求传入键值对对象（键为Effect名称，值为createEffect创建的函数式Effect）。直接传入单个Effect实例会导致类型校验失败，触发重载不匹配错误。

额外检查点：

• 确保NgRx版本为17及以上，与Angular 17版本兼容
• 确认weather.effects.ts中createEffect已正确设置{ functional: true }选项（你的代码已满足此要求）

内容的提问来源于stack exchange，提问作者oussama omrani