Property 'pipe' does not exist on type 'OperatorFunction<unknown, Team[]> error-CodePudding

I am creating an effect service using @ngrx/effects library. But I am getting error. It seems error comes from the action parameter in switchMap. If I hover it action:unknown I think action is the result of ofType operator. Could it not infere the type from the previous operator?

//auth.effects.ts

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import * as AuthActions from './auth.actions';
import { map, Observable, switchMap } from 'rxjs';
import { ApiService } from 'src/app/services/api.service';
import { Team } from '../models/team.class';

@Injectable()
export class AuthEffects {
  constructor(private actions$: Actions, private apiService: ApiService) {}

  loadTeams$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(AuthActions.loadTeams),
      switchMap((action) => this.apiService.getTeams()).pipe( // Property 'pipe' does not exist on type 'OperatorFunction<unknown, Team[]>
        map((teams: Team[]) => AuthActions.loadTeamsSuccess({ teams }))
      )
    );
  });
}

Below is my actions.

//auth.actions.ts

import { createAction, props } from '@ngrx/store';
import { Team } from '../models/team.class';

export const loadTeams = createAction('[Auth] Load Teams from Server');

export const loadTeamsSuccess = createAction('[Auth] Load Teams Success', props<{ teams: Team[] }>());

export const loadFailure = createAction('[Auth] Load Failure');

CodePudding user response：

Seems you are getting error because of syntax error:

...
  switchMap((action) => this.apiService.getTeams().pipe(
    map((teams: Team[]) => AuthActions.loadTeamsSuccess({ teams }))
  ))
);
...