在非对象上调用Object.defineProperty

Question

当我将 ProvideEffects 添加到我的模块时，我遇到了错误。但是，当我删除它时，auth.effects.ts 文件无法按预期工作并且无法进行 API 调用： 但是我收到这个错误：

 at Function.defineProperty (<anonymous>)
    at Module.createEffect (/Users/stefanoantonetti/WebstormProjects/ngrx-counter-a17/.angular/cache/18.2.4/vite/deps_ssr/@ngrx_effects.js:50:10)
    at _AuthEffects.<instance_members_initializer> (/Users/stefanoantonetti/WebstormProjects/ngrx-counter-a17/src/app/auth/state/auth.effects.ts:13:12)
    at new _AuthEffects (/Users/stefanoantonetti/WebstormProjects/ngrx-counter-a17/src/app/auth/state/auth.effects.ts:30:3)
    at map (/Users/stefanoantonetti/WebstormProjects/ngrx-counter-a17/src/app/auth/state/auth.effects.ts:30:101)
    at eval (/Users/stefanoantonetti/WebstormProjects/ngrx-counter-a17/.angular/cache/18.2.4/vite/deps_ssr/chunk-S4UJ36BC.js:4456:35)
    at runInInjectorProfilerContext (/Users/stefanoantonetti/WebstormProjects/ngrx-counter-a17/.angular/cache/18.2.4/vite/deps_ssr/chunk-S4UJ36BC.js:3058:5)
    at R3Injector.hydrate (/Users/stefanoantonetti/WebstormProjects/ngrx-counter-a17/.angular/cache/18.2.4/vite/deps_ssr/chunk-S4UJ36BC.js:4455:11)
    at R3Injector.get (/Users/stefanoantonetti/WebstormProjects/ngrx-counter-a17/.angular/cache/18.2.4/vite/deps_ssr/chunk-S4UJ36BC.js:4345:23)
    at injectInjectorOnly (/Users/stefanoantonetti/WebstormProjects/ngrx-counter-a17/.angular/cache/18.2.4/vite/deps_ssr/chunk-S4UJ36BC.js:3190:36

我已尝试删除该块

provideEffects(AuthEffects) 

但是效果无法按预期工作并阻止 API 调用。这是我的效果课：

import {Injectable} from "@angular/core";
import {Actions, createEffect, ofType} from "@ngrx/effects";
import {AuthService} from "../services/auth.service";
import {Router} from "@angular/router";
import {loginFailure, loginStart, loginSuccess} from "./auth.actions";
import {catchError, exhaustMap, map, of, tap} from "rxjs";
import {AuthResponse} from "../../models/auth-response.model";


@Injectable()
export class AuthEffects {

  login$ = createEffect(() => {
    return this.actions$?.pipe(
      ofType(loginStart),
      tap(action => console.log('Effetto login innescato', action)),
      exhaustMap((action) =>
        this.authService.login(action.email, action.password).pipe(
          map((authResponse: AuthResponse) => {
            console.log(authResponse)
            this.router.navigate(['home']).then()
            return loginSuccess()
          }),
          catchError(() => of(loginFailure()))
        )
      )
    );
  });

  constructor(private actions$: Actions, private authService: AuthService, private router: Router) {}


}

这似乎表明了如何注册效果或如何在模块中提供依赖项的潜在问题。我真的不知道该怎么做，因为似乎是文件 auth.effects.ts 配置错误的问题。我希望我要发布的这段代码可能有所帮助（app.config.ts）：

import {ApplicationConfig, isDevMode, provideZoneChangeDetection} from "@angular/core";
import {provideRouter} from "@angular/router";
import {routes} from "./app.routes";
import {provideClientHydration} from "@angular/platform-browser";
import {provideHttpClient, withFetch} from "@angular/common/http";
import {provideStore} from "@ngrx/store";
import {counterReducer} from "./counter/state/counter.reducer";
import {postsReducer} from "./posts/state/posts.reducer";
import {authReducer} from "./auth/state/auth.reducer";
import {provideEffects} from "@ngrx/effects";
import {AuthEffects} from "./auth/state/auth.effects";
import {provideStoreDevtools} from "@ngrx/store-devtools";


export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes), provideClientHydration(),
    provideHttpClient(withFetch()),
    provideStore({
      counter: counterReducer,
      posts: postsReducer,
      auth: authReducer,
    }),
    provideEffects(AuthEffects),
    provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() })
]
};

Answer 1

provideEffects

用于使用独立 API 时。既然您提到您正在使用

Modules

，那么您应该使用

EffectsModule

来代替，如下所示：

import { EffectsModule } from '@ngrx/effects';

@NgModule({
  imports: [
    //notice the array, you can register more effects if needed
    EffectsModule.forRoot([AuthEffects]), 
  ],
})
export class AppModule {}