angular2 : issue with rest api

You're so close! The mistake here is in how you handle Promises, along with misunderstanding how they return. In this case you were trying to assign an undefined property (response.json().data) when you meant to coerce response.json() as type Hero[] then return.

What you'll need to do is ensure you have a matching type to assign your response when it's converted to a JSON with that json() call. The Hero type in the guide does not match your response, and you'll have errors because of that.

To check that you're receiving a response, make a call to the service's getHeroes() function and log the returned value. Logging internally to the function can be done, but that would be where understanding how Promises work in depth would help more than anything.

getHeroes(): Promise<Hero[]> {

    return this.http.get(this.heroesUrl)
               .toPromise()
               .then((response) => response.json() as Hero[])
               .catch(this.handleError);
}

If you want to know I'm not crazy, here's the code to log internally. This should log your response no matter what type is received.

getHeroes(): Promise<Hero[]> {

    return this.http.get(this.heroesUrl)
               .toPromise()
               .then((response) => {
                 console.log(response.json());
               })
               .catch(this.handleError);
}

For further context into why you do these then() calls, a Promise returns asynchronously which means the result is only available after an indeterminate amount of time has passed. Any execution that must wait for the result must either happen in the then() calls or after the function returns an actual value. As JS functions run synchronously if you try to execute the following example you'll see a printout of undefined rather than a string response. This is because the console.log(r) is called immediately after the promise call, completely oblivious to the fact it hasn't actually let r be assigned a value.

getHeroes(): Promise<Hero[]> {
      var r;
      this.http.get(this.heroesUrl)
               .toPromise()
               .then((response) => r = response.json())
               .catch(this.handleError);
      console.log(r);

}