Angular 5 Typescript says webpack failed as Property data does not exists on type Response

Question

I seem to get an error with webpack compiling. It compiles if I remove .data but then the page blows up with the calls from template->component (which calls a service

Error I am getting

ERROR in src/app/components/app-landing-page/app-landing-page.component.ts(95,41): error TS2339: Property 'data' does not exist on type 'Response'.

 webpack:  Failed to compile

That is when my component has

this.referrals = result.data;

component:

this.arsSevice.getArsCodesApi(this.model)
    .subscribe(
        result => {

            this.referrals = result.data;
            console.log('component',result);
        })

Service:

getArsCodesApi(search: arsCodes) {
    return this.http.post(this.serviceUrl, JSON.stringify(search), httpOptions)
    JSON.stringify(search), options)
        .map((response: Response) => {
            return response;              
        })
  }

FYI http is the new httpclient

Once I compile it without .data -- running with ng serve --open then i have to add .data back in

If I don't add it, the call fails to work and i get this error

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

WHY??? ( console.log clearly shows that that is data : Array(16) )

Edit Update showing console.log of data

Possible duplicate of [Angular 4 Observable service not working for an api http get](https://stackoverflow.com/questions/46072281/angular-4-observable-service-not-working-for-an-api-http-get) — Al-Mothafar, Dec 06 '17 at 20:56
@Al-Mothafar the linked question has two contradictory answers, neither accepted, and both of low quality. — Aluan Haddad, Dec 06 '17 at 21:07
Why do you have code like `.map((response: Response) => {return response;})`? The type annotation can mask an error (remove it). The function does nothing except (possibly) change the static type of the observable. Also, components should not unwrap result properties like that, the service should handle it. — Aluan Haddad, Dec 06 '17 at 21:10
can you add what console.log('component',result); shows? you are probably trying to Iterate the object inside the array. — Rildo Gomez, Dec 06 '17 at 21:11
@RildoGomez question updated showing the image of the console.log thx — , Dec 06 '17 at 21:25
@AluanHaddad i'm rather new to arrow functions, remove the "type annotation " means to remove exactly which part? thx — , Dec 06 '17 at 21:26
@ScottLeary go from `(response: Response) => {}` to `response => {}` — Aluan Haddad, Dec 06 '17 at 21:27
@ScottLeary which error do you you need help with? `TS2339` or `Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.` I can't even tell from reading your question what state your code is in. Also you have a weird random stringify call between return and map and a bunch of other stuff. Please explain more clearly. — Aluan Haddad, Dec 06 '17 at 21:33
without the : Response , I cannot get the page to display any records on the page with and without .data on the end of the result — , Dec 06 '17 at 21:53
JSON.stringify(search) is for the typescript class getArsCodesApi(search: arsCodes) — , Dec 06 '17 at 21:54
@ScottLeary type annotations do not change the shape of the data at all. So it's not possible that removing one would change the data that is displayed. Also I still have no idea what your service method is trying to do because it doesn't make any sense the way it's written — Aluan Haddad, Dec 06 '17 at 21:55
@AluanHaddad - well this is the 2nd job that I have been on teams in which i have written the http.post this way. Could you please provide an answer showing me a better way of doing this from a component and service ? — , Dec 06 '17 at 22:01
@ScottLeary can't you just `return this.http.post(whatever);`? Again, if you look at the service method you posted here, it doesn't make sense because you have a random call to stringify in the middle of it and your mapping it with an identity function. — Aluan Haddad, Dec 06 '17 at 22:03
you should be using `.subscribe((data) => { // do something // })` as the new `HttpClient` returns an `Observable — Nicholas Pesa, Dec 06 '17 at 22:44

score 1 · Accepted Answer · answered Dec 10 '17 at 19:06

This is like Nicholas Pesa commented, the HttpClient parses your response in an Object, and it does not know what shape it is. So either use bracket notation or then type your data (recommended):

export interface MyResponse {
  data: MyType[];
}

export interface MyType {
  ID: number;
  ARSCode: string;
  // rest of properties
}

Then explicitly tell Angular that you are receiving a response of type MyResponse, also as a bonus you can tell Angular what type of data you are expecting, i.e an observable array of MyType:

getArsCodesApi(search: arsCodes): Observable<MyType[]> {
  return this.http.post<MyResponse>(this.serviceUrl, search, httpOptions)
    .map(res => res.data)
}

Then in your component you just subscribe to it.

referrals: MyType[] = [];

ngOnInit() {
  this.arsSevice.getArsCodesApi(this.model)
    .subscribe(
      result => {
        this.referrals = result;
        console.log('component',result);
    })
}

Read more about typechecking with the HttpClient from the docs: https://angular.io/guide/http#typechecking-the-response

Angular 5 Typescript says webpack failed as Property data does not exists on type Response

1 Answers1