Angular 18 + NgRx Effect构造函数未执行致属性未初始化问题

你遇到的核心问题是PostEffects类未被正确实例化，导致构造函数代码不执行，同时createEffect回调中的this无法访问类实例属性（因为实例根本没创建）。以下是具体排查和修复步骤：

1. 修复语法错误 #

你的getPosts$定义里存在多余的闭合大括号，导致类的语法结构错误，Angular无法正确解析这个类，自然无法实例化它：

错误代码片段：

getPosts$ = createEffect(() => {
    console.log("Effect Creation")
      return this.actions$.pipe(...)
    } // 这里多了一个不必要的大括号
  );

修复后：

getPosts$ = createEffect(() => {
    console.log("Effect Creation")
    return this.actions$.pipe(
      ofType(PostsActions.getPosts),
      mergeMap(() => {
        return this.postService.getPosts().pipe(
          map(posts => posts.posts),
          map((allPosts) => PostsActions.getPostsSuccess({posts: allPosts})),
          catchError((error) =>
            of(PostsActions.getPostsFailure({error: error.message}))
          )
        );
      })
    );
});

2. 确保PostService已正确注入 #

如果PostService没有配置@Injectable({ providedIn: 'root' })，必须在appConfig的providers数组中添加它的提供者，否则PostEffects的依赖注入会失败，导致类无法实例化：

export const appConfig: ApplicationConfig = {
  providers: [
    // ...其他提供者
    PostService, // 或者使用providePostService()（如果是独立服务）
    provideEffects([PostEffects])
  ]
};

3. 确认NgRx版本与Angular 18兼容 #

Angular 18需要搭配NgRx 18版本，版本不兼容会导致Effects无法正常初始化。执行以下命令确保版本匹配：

npm install @ngrx/store@18 @ngrx/effects@18 @ngrx/store-devtools@18

4. 验证Effects注册方式 #

虽然provideEffects([PostEffects])的写法是允许的，但也可以尝试直接传入类的方式，确保注册生效：

provideEffects(PostEffects)

完成以上步骤后，重新启动应用，PostEffects的构造函数应该会正常执行，console.log("Constructor")也会输出，同时getPosts$中的this能正确访问actions$和postService。

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