CODEWITHSUNDEEP
angularangular6
enbermudas
enbermudas

Reputation: 1615

Property 'status' does not exist on type 'User'

I'm working on a personal project with Angular 6 as my client and Laravel 5.6 as my API and I can't understand what going on with my auth service.

For some context: I would like to implement jwtAuth to manage my user authentification and it is working perfectly (I've tested the api endpoints with Postman). Now, this is my register function:

public function register(RegisterFormRequest $request)
    {
        $user = new User;
        $user->username = $request->username;
        $user->email = $request->email;
        $user->password = bcrypt($request->password);
        $user->save();

        return response()->json([
            'status' => 'success',
            'message' => '¡Usuario registrado!',
            'user' => $user
        ], 200);
    }

As you can see, this function returns a json with an status, message and the user information. On the client side, this is my auth.service.ts "register user" function:

registerUser(user: User):Observable<User> {
    return this.http.post<User>(`${this.url}/register`, user, httpOptions)
      .pipe(
        catchError((e:Response) => throwError(e))
      );
  }

Whichs returns the exact same json that i've define on my API if everything goes fine. Finally, in my register.component.ts, this is the function that i use to implement that service function:

onSubmit() {
    this.authService.registerUser(this.user).subscribe(
      response => {
        swal({
          type: response.status,
          text: response.message,
          footer: 'Usted será redirigido hacia el formulario de ingreso.',
          showConfirmButton: false,
          showCloseButton: false,
          showCancelButton: false,
          allowEscapeKey: false,
          allowOutsideClick: false,
        });
      }
    );
  }

Just like that, it does not work because it throws the next error:

Property 'status' does not exist on type 'User'.

By the way, here is my user class:

export class User {
  id: number;
  username: string;
  email: string;
  password: string;
  password_confirmation: string;
}

And I assume that it will do just the same with the response.message and I think it is related to the Observable handler but i can't understand how it works. If i remove those to lines of code, everything works so... How can I solve this problem?

PD: Sorry for my bad english!

Upvotes: 0

Views: 1491

Answers (3)

Pezetter
Pezetter

Reputation: 2862

You are casting your response to a user, when its actually the response type you created on your api:

}
  status: string
  message: string
  user: User
}

So, if you dont care about the status fields or message fields, just map the response to just return the user.

//Create a response type or interface or class
export interface RegisterUserResponse {
  status: string
  message: string
  user: User
}



registerUser(user: User):Observable<User> {
    return this.http.post<User>(`${this.url}/register`, user, httpOptions)
      .pipe(
        catchError((e:Response) => throwError(e)),
        map((resp: RegisterUserResponse) => {
          return resp.user; //this should satisfy 'this.http.post<User>'
        })
      );
}

Upvotes: 1

Ayoub k
Ayoub k

Reputation: 8878

You have to add status to your user type: 

export class User {
  id: number;
  username: string;
  email: string;
  password: string;
  password_confirmation: string;
  status: string;
}

otherwise you can just return Observable from your service. 

registerUser(user: User):Observable<Any> {
    return this.http.post<Any>(`${this.url}/register`, user, httpOptions)
      .pipe(
        catchError((e:Response) => throwError(e))
    );
}

Upvotes: 1

Julien METRAL
Julien METRAL

Reputation: 1974

It's because your function registerUser is returning an observable of type User :

registerUser(user: User):Observable<User>

and when you call it :

registerUser(this.user).subscribe(
  response => {
    swal({
      type: response.status,

response is supposed to be of type User (because you has specified it), so change your return type to Angular http response or any and then response will be able to have the status property :)

Upvotes: 1

Related Questions