属性 pipe 在类型 void Angular 上不存在

Question

This is my code it gives me error here when i am using first with pipe in angular 10

import { first } from 'rxjs/operators';
import { AuthenticationService } from '../services/authentication.service';

submitForm(){ 
      this.submitted = true;
      if (this.loginForm.invalid) {
        return;
     }

      this.loading = true;
      console.log(this.f.username.value)
      this.executeImportantAction();
      this.authenticationService.login(this.f.username.value, this.f.password.value)
            .pipe(first())                                                           >>> Error here
            .subscribe(
                data => {
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    this.error = error;
                    this.loading = false;
                });
      }

This is my Login function in authenticateService which is down bellow

  login(userId: string, userPassword: string) {
        this.http.post<any>(this.Url,'/' + {userId} + '/' + {userPassword})
            .pipe(map(user => {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
                return user;
            }));
    }

That Error was gone but now i am getting the new error

 login(userId: string, userPassword: string): Observable<User> {
        this.http.post(this.Url,'/' + {userId} + '/' + {userPassword})
            .pipe(map(user => {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
                return user;
            }));
    }
    

Answer 1

You have to return this.http, right now login is not returning anything (the return inside the map of the http pipe is a return for the pipe, login still returns void)

you could have noticed this if you used TS to its full extent. Change your function types to:

login(userId: string, userPassword: string): Observable<User> (you should create an interface for the user, instead of using any)

this.http.post<dont-use-any-here>

With types, TS would have warned you with this functions expects to return an observable, but you are returning void

login(userId: string, userPassword: string): Observable<User> {
        return this.http.post(this.Url,'/' + {userId} + '/' + {userPassword})
            .pipe(map(user => {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
                return user;
            }));
    }