Angular 2 + web api[英] Angular 2 + web api

问题描述

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

推荐答案

• 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;
}

其他推荐答案

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.