After conducting a search on Stack Overflow, I found a similar question that relates to my issue.

Login OTP Component:

    onSubmitValidOTP() {        
      this.authenticationService.ValidOTP(this.fo.OtpControl.value, username, role)
        .pipe(first())
        .subscribe(
          data => {
            console.log(data);            
          },
          error => {
            console.log(error);            
          });
  }

Auth Validate Service:

ValidOTP(OTP, UserName, type) {    
    return this.http.post<any>(`Staff/ValidateOTP`, { OTP, UserName, type })
      .pipe(map(bool => {        
        return bool;
      }));
  }

Staff Controller:

[AllowAnonymous]
        [HttpPost("ValidateOTP")]
        internal IActionResult ValidOTP(string OTP, string UserName, string type)
        {
            bool Result = false;
            if (type == "SuperAdmin")
            {
                Users _Users = _Context.Users.FirstOrDefault(j => j.Username == UserName);
                if (_Users != null)
                {
                    
                }
            }
            else
            {
                Staff _Staff = _Context.Staffs.FirstOrDefault(j => j.Username == UserName);
                if (_Staff != null)
                {
                    
                }
            }
            return Ok(new { Result = Result });
        } 

An error appeared in the chrome developer console.
https://i.sstatic.net/wLllj.png

Update:
Below is the content of my login.ts file

import { AlertService, AuthenticationService } from '../_services';
import { first } from 'rxjs/operators';
@Component({
  templateUrl: './login.html'
})

export class LoginComponent implements OnInit {      
  returnUrl: string;
  constructor(private Router: Router,        
    private route: ActivatedRoute,
    private router: Router,
    private authenticationService: AuthenticationService,    
  ) {
    this.pageSettings.pageEmpty = true;
    if (this.authenticationService.currentUserValue) {
      this.router.navigate(['/']);
    }
  }    

  get f() { return this.loginForm.controls; }  
  onSubmit() {
    this.authenticationService.login(this.f.LoginUserNameControl.value, this.f.PasswordUserNameControl.value)
      .pipe(first())
      .subscribe(
        data => {
          if (data.validIp) {
            this.router.navigate([this.returnUrl]);
          }
          else {
            this.FormSubmitBool = false;
            this.VerifyOTP = true;
          }
        },
        error => {
          console.log(error);
          this.alertService.error(error);
          this.loading = false;
        });
  }    

  ValidOTP(OTP, UserName, type) {    
    return this.http.post<any>(`Staff/ValidateOTP`, { OTP, UserName, type })
      .pipe(map(bool => {        
        return bool;
      }));

This is just a section of my login.ts file that has been trimmed for clarity.

Update 2:
Here is the code snippet from my authentication.service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { BehaviorSubject, Observable } from 'rxjs';
    import { map } from 'rxjs/operators';
    import { User } from '../_models';
    
    @Injectable({ providedIn: 'root' })
    export class AuthenticationService {
      private currentUserSubject: BehaviorSubject<User>;  
      public currentUser: Observable<User>;
    
      constructor(private http: HttpClient) {
        this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
        this.currentUser = this.currentUserSubject.asObservable();
      }
    
      public get currentUserValue(): User {
        return this.currentUserSubject.value;
      }
    
      login(username, password) {
{ username, password })
`Users/authenticate`, { username, password })
        return this.http.post<any>(`Staff/authenticate`, { username, password })
          .pipe(map(user => {
            localStorage.setItem('currentUser', JSON.stringify(user));
            this.currentUserSubject.next(user);
            return user;
          }));
      }
    
      ValidOTP(OTP, UserName, type) {
        return this.http.post<any>(`Staff/ValidateOTP`, { OTP, UserName, type })
          .pipe(map(bool => {        

            return bool;
          }));
      }
    
      logout() {
        // remove user from local storage and set current user to null
        localStorage.removeItem('currentUser');
        this.currentUserSubject.next(null);
      }
    }

Update 3:
The following piece of code displays an error message in the console.

onSubmitValidOTP() {        
    let IsUpdated = this.authenticationService.ValidOTP(this.fo.OtpControl.value, JSON.parse(localStorage.getItem('currentUser')).username, JSON.parse(localStorage.getItem('currentUser')).role)
    if (IsUpdated) {
      console.log(IsUpdated);
      IsUpdated
        .pipe(first())
        .subscribe(
          data => {
            console.log(data);            
          },
          error => {
            console.log(error);            
          });

    }
    else {
      this.InvalidOtp = false;
    }
  }