Response model parameter is undefined in Angular 13 api call

Question

I am doing a POST API call for user authentication with httpclient in Angular 13/TypeScript 4.4.4. I can check the response model content and it seems ok, but if I access a property of the model, it is undefined.

This is the response model:

import { UserAccountStatus } from "./Enums";

export interface AuthResponseModel {
    UserLoginId: number;
    AccountStatus: UserAccountStatus;
}

Here the service POST call:

import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Injectable, Inject } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AuthResponseModel } from '../shared/AuthResponseModel';
import { LoginModel } from '../shared/LoginModel';

const httpOptions = {
  headers: new HttpHeaders({
      'Content-Type': 'application/json'
  })
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor( private http: HttpClient ) { }

  private get APIUrl(): string {
    return this.token;
  }

  Login( username: string, password: string ): Observable<AuthResponseModel> {
    const url: string = 'https://test.com/api/Auth/Login';

    const loginModel: LoginModel = {
      Username : username,
      Password : password
    };

    return this.http.post<LoginModel>( url, loginModel, httpOptions )
      .pipe(
        catchError( this.errorHandler ) );
  }

  private errorHandler( error: HttpErrorResponse ): Observable<any> {
    console.error('Error occured!');
    return throwError( () => error );
  }
}

And here is my login form, where the service is used:

import { OnInit, Input, Component, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { lastValueFrom } from 'rxjs';
import { AuthService } from '../services/auth.service';
import { AuthResponseModel } from '../shared/AuthResponseModel';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm!: FormGroup;
  authResp?: AuthResponseModel;

  constructor(private authSrv: AuthService) { }

  async submit() {
    if ( this.loginForm.valid ) {
      const resp$ = this.authSrv.Login( this.loginForm.value.username, this.loginForm.value.password );
      this.authResp = await lastValueFrom( resp$ );
      
      if ( this.authResp ) {
        const id: number = this.authResp.UserLoginId; // <- undefined
        const dbg: string = JSON.stringify( this.authResp );
        console.log(dbg); // <- ok with the correct value (...UserLoginId: 3)
      }
    }
  }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      username: new FormControl(''),
      password: new FormControl(''),
    });
  }
}

What am I missing here? Something with map?

This is the dbg output:

{"userLoginId":3,"accountStatus":5}

Answer 1

The server respond with userLoginId (lowercase u) and accountStatus (lowercase a), so this.authResp.UserLoginId is undefined.

Your model should be

export interface AuthResponseModel {
    userLoginId: number;
    accountStatus: UserAccountStatus;
}