Angular 2 + web api

Question

I've worked on the Tour of Heroes tutorial,works perfectly well.

I've made a Web api with C# as a small backend to test further. When I try to join said back-end, angular returns an error 404 not found, even when next tab is on the exact same road.

This is the error :

 An error occurred Object { _body: Object, status: 404, ok: false, statusText: "Not Found", headers: Object, type: null, url: "http://localhost:58225/api/Character" }

I've tried login the answer of the call, I return an "[object Object]" , but I guess that's the error message itself.

@Injectable()
export class CharacterService{
private charactersUrl = 'http://localhost:58225/api/Character';

constructor(private http:Http){}

getCharacters(): Promise<Character[]>{
    alert("Getting Characters");

    var my_data = this.http.get(this.charactersUrl)
                    .toPromise()
                    .then(response => response.json().data)

    console.log("Resultat de l'appel = "+my_data);

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

As you can see there's nothing really original here.

The /api/Character returns an IEnumerable that contains the list of my characters.

public IEnumerable<string> GetAll()
    {
        List<Character> myCharacs = repo.Get().ToList();
        List<String> myJsonCharacs = new List<string>();
        foreach (var charac in myCharacs)
        {
            var cur = jsonConverter.Serialize(charac);
            myJsonCharacs.Add(cur);
        }

        return myJsonCharacs;

    }

I don't really know how I'm supposed to test further ? I'm reading on promises and observables to see if I missed something, but this is the simplest example I could think of :/

Edit :

I have changed the response of the API for json by following this : How do I get ASP.NET Web API to return JSON instead of XML using Chrome?.

The API now returns this when I browse directly to it :

 ["{\"characterName\":\"Azazel\",\"playerName\":\"Mulhouse\",\"game\":{\"name\":\"Call of Cthulhu\",\"BaseAttributes\":[{\"max\":18,\"value\":12,\"name\":\"appearance\"},{\"max\":18,\"value\":21,\"name\":\"constitution\"},{\"max\":18,\"value\":19,\"name\":\"strength\"},{\"max\":18,\"value\":17,\"name\":\"dexterity\"},{\"max\":18,\"value\":15,\"name\":\"power\"},{\"max\":18,\"value\":13,\"name\":\"size\"},{\"max\":18,\"value\":13,\"name\":\"intelligence\"},{\"max\":24,\"value\":12,\"name\":\"education\"}],.....

Made no difference. (This is a sample of the answer, it's actually way longer)

Also, since the answer is a 404 to the path, I suspect the problem is not related to the format of the answer but more to angular's configuration. How could I check this?

EDIT : Could a difference between the structure of my objects cause this 404 error? If my json character coming from the server has more fields than the json character defined in angular2, what happens?

Thank you

What happens when you go with the browser directly to http://localhost:58225/api/Character — Poul Kruijt
– Poul Kruijt, Commented Feb 20, 2017 at 11:12
Could it be, that perhaps should use just response.json() instead of response.json().data?? — AVJT82
– AVJT82, Commented Feb 20, 2017 at 11:12
@mxii I'll try, but the error message indicates that it can't find the road... and the response.json() normally converts the answer to json, doesn't it? — DoctorPrisme
– DoctorPrisme, Commented Feb 20, 2017 at 11:15
response.json() will convert the JSON-STRING-response into a object !! — slaesh
– slaesh, Commented Feb 20, 2017 at 11:23

slaesh · Accepted Answer · 2017-02-20 12:18:11Z

0

The WWW is case-sensitive!

private charactersUrl = 'http://localhost:58225/api/character';

your server should response just a JSON-string
seems like there is no data property, so use it like this:

.then( (response => response.json() as Character[]) )

change your server function like this (serialize to json yourself!)

public string GetAll()
{
    List<Character> myCharacs = repo.Get().ToArray();
    return jsonConverter.Serialize(myCharacs);
}

or let the framework do the work..

public IEnumerable<Character> GetAll()
{
    List<Character> myCharacs = repo.Get().ToArray();
    return myCharacs;
}

edited Feb 20, 2017 at 12:18

answered Feb 20, 2017 at 11:28

slaesh

17k6 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

DoctorPrisme Over a year ago

The API url case is correct in my code, I don't know why the copy-paste gave a lowercase. My server now gives a JSON string as response. I've tried using "response => response.Json as Character[]) Nothing changed.

slaesh Over a year ago

If you can access the route via browser, there should be no reason that angular cant! and the error 404 is given by the server, not from angular.

DoctorPrisme Over a year ago

Well... I agree on the fact there is no reason angular can't. But still....

slaesh Over a year ago

Can't say much more from here.. Check another tool like Postman to GET that route. The http module don't cares about object structures.. it just get the http-response..

DoctorPrisme Over a year ago

If I click on the link provided in the error message, I see the objects in my browser :3

|

DoctorPrisme · Accepted Answer · 2017-02-21 11:45:14Z

0

A friend finally found the answer :

REMOVE THE IN-MEMORY-DATA-SERVICE references. That thing blocks http requests.

I know have a different error, but at least I can reach the API.

answered Feb 21, 2017 at 11:45

DoctorPrisme

1033 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular 2 + web api

2 Answers 2

17 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related