Angular - error TS2339: Property 'data' does not exist on type 'Object' in Angular 7

Question

I am developing an application using Laravel 5.8 and Angular 7. Laravel 5.8 is the backend while Angular 7 is the frontend.

Laravel

apiController

    public function returnResponse($success, $data, $errorCode = 0, $message = false) {
    $response = array();
    $response['success'] = $success;
    $response['message'] = isset($message) ? $message : '';
    if ($errorCode) {
        $response['errorCode'] = isset($errorCode) ? $errorCode : 0;
    }
    $response['data'] = $data;
    return response()->json($response, 200);
}


public function getClientLists() {
    $Client = new Clients();
    $Clientlist = $Client->get();
    $ClientlistDetails = $Clientlist->toArray();
    $success = $ClientlistDetails;
    if (count($ClientlistDetails) > 0) {
        return $this->returnResponse(true, $success, 1, 'Client List');
    } else {
        return $this->returnResponse(true, $success, 1, 'No Client Found');
    }
} 

routes: api.php

Route::get('indexClient','ApiController@getClientLists');

I tested the endpoint and it worked perfectly as shown below:

Angular: Frontend

service

client-profile.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { HttpErrorHandler, HandleError } from '../../shared/services/http-handle-error.service';

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

  private readonly apiUrl = environment.apiUrl;
  private clientprofileUrl = this.apiUrl;
  private handleError: HandleError;

  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler ) {
    this.handleError = httpErrorHandler.createHandleError('ClientProfileService');
  }

     getClientLists() {
  return this.http.get(environment.apiUrl + '/indexClient', {});
  } 
 }

client-profile-list.component.ts

       import { ClientProfileService } from '../../../../shared/services/client-profile.service';
   @Component({
   selector: 'app-client-profile-list',
   templateUrl: './client-profile-list.component.html',
   styleUrls: ['./client-profile-list.component.scss']
  })
  export class ClientProfileListComponent implements OnInit {

  @ViewChild ('validateform') validateform: NgForm;
  clientProfileData: any;
  userId: number;


 constructor(
   private route: ActivatedRoute,
   private toastr: ToastrService,
   private clientprofileService: ClientProfileService
  ) {

 const user = JSON.parse(localStorage.getItem('currentUser'));
 if (user && user.userId) {
   this.userId = user.userId;
  }

client-profile-component.html

                <tbody>
                <tr *ngFor="let clientprofile of clientProfileData">
                <td>{{i + 1}}</td>
              <td>{{clientprofile?.client_id}}</td>
              <td>{{clientprofile?.client_name}}</td>
              <td>{{clientprofile?.search_name}}</td>
              <td>{{clientprofile?.posting_group}}</td>
              <td>{{clientprofile?.staff_no}}</td>
              <td>{{clientprofile?.address1}}</td>
              <td>{{clientprofile?.address2}}</td>
          </tr>
          </tbody>

When I served the Angular, I got this error:

ERROR in src/app/pages/clients/client-profile/client-profile-list/client-profile-list.component.ts(87,45): error TS2339: Property 'data' does not exist on type 'Object'.

This is the line 87:

this.clientProfileData = response.data;

How do I resolve this?