angular 2 heroes tutorial - using a server for data

[norricorp]

Hi,

Using the Heroes tutorial on the Angular 2 website. I have set up the heroService to use a rest service from tomcat. Using curl produces the correct result

C:\Temp\curl>curl http://centos7-ansible:8080/heroes/heroes
[{"id":1,"name":"Mr. Nice"},{"id":2,"name":"Narco"},{"id":3,"name":"Bombasto"},{"id":4,"name":"Celeritas"},{"id":5,"name":"Magneta"},{"id":6,"name":"RubberMan"},{"id":7,"name":"Dynama"},{"id":8,"name":"Dr IQ"},{"id":9,"name":"Magma"},{"id":10,"name":"Tornado"}]

So in the hero.service.ts,

private heroesUrl = 'http://centos7-ansible:8080/heroes/heroes';  // URL to web api
getHeroes(): Promise<Hero[]> {
        return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json().data as Hero[])
               .catch(this.handleError);
    }

In the calling component,

  ngOnInit(): void {
        console.log("about to get data");   
    this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(4, 8));
        console.log("returned from getting data");
        console.log(length of array is " + this.heroes.length );
  }

Looking at the console I get

about to get data 
GET http://centos7-ansible:8080/heroes/heroes   200 OK  43ms     
returned from getting data 
length of array is 0

So it works from curl but within Angular does not.

Also, looking at the access log in Tomcat, the same log message is for both curl and angular access.

"GET /heroes/heroes HTTP/1.1" 200 273
"GET /heroes/heroes HTTP/1.1" 200 273

Is the "273" the length of data returned? Which would suggest the data is there but is not being put in the Hero array?

Is my heroesUrl correct?

Within console, I get

EXCEPTION: Uncaught (in promise): TypeError: e is undefined

What does this mean?

What is "e"?

How do I go about debugging this as the console gives the code lines as part of a bundle.js.

Regards,

John

[Sander Elias]

Hi John,

Did you inspect the network request in the developers debugging console? What is the result you get in there?

It might be a cors issue, that get's lost in the toPromise handling. 

Regards

Sander

[norricorp]

Hi Sander,

I do not think it is a CORS issue because I did have CORS errors in the browser debugger console. These stopped when I added a grails plugin for the data server.

Because of the log messages from Tomcat, I do think that is doing its job so the problem is somewhere inside the angular call and handling the return data. Of course having said that, it could well be that the structure of the JSON data returned by the server is the wrong structure for Angular.

If I was to reset the angular app to use in memory web api, is there a way of showing the JSON that is returned so that I could compare it with the data that curl receives from the server?

Interestingly, if I use MS Edge browser, then the get call in the angular code is not reaching tomcat. If I use Firefox it is reaching tomcat.

Using F12 debug console, I get

             Exception: Uncaught (in promise): TypeError: heroes is undefined

So though data is returned from server it is not being handled by the promise callback. I think.

Regards,

John

[norricorp]

I added the following console messages

 getHeroes(): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
               .toPromise()

               .then(response => {  console.log("service response text " + response.statusText);
                  console.log("service response data " + response.json().data);
                  console.log("service response status " + response.status);
                  response.json().data as Hero[];}
               .catch(this.handleError);
 }

and the output was

service response text OK
service response dataundefined
service response status 200
returned heroes is undefined

[Sander Elias]

Hi Norricorp

I don't think you need the data part, as that is not a part of your json structure.

try this:

 getHeroes(): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => {  console.log("service response text " + response.statusText);

                  console.log("service response data " + response.json());

                  console.log("service response status " + response.status);

                  return response.json();}
               .catch(this.handleError);
 }

I hope this helps you a bit,

Regards

Sander

[norricorp]

Hi Sander,

yes that did help, getting rid of the data part.. I think there was a problem with a change in angular so I upgraded. Unfortunately ng init is not working in the new version so was unable to upgrade the application but I recreated it from scratch and switching between in memory db and the grails server now works.

There is a problem with the grails server now in terms of retrieving new data but that is a different problem.

Many thanks,

John