Angular 2 api call responds with 404 even though service works when tested

Question

I am trying to call a web service from my Angular 2 app.

private baseUrl: string = 'http://localhost:3000/api';

getPatterns(): Observable<Pattern[]> {
    const patterns$ = this.http
        .get(`${this.baseUrl}/pattern`, {headers: this.getHeaders()})
        .map(this.mapPatterns)
        .catch(this.handleError);
    return patterns$;
}

private getHeaders() {
    const headers = new Headers();
    headers.append('Accept', 'application/json');
    return headers;
}

This gives me a 404 error for URL: http://localhost:3000/api/pattern even though I get a valid response when I open the URL in browser or try to call it from POSTMAN.

Any help pointing out why this doesn't work would be appreciated.

Thanks!

100% impossible. Can you see the network calls in the dev tools of the browser — Aravind, Mar 11 '17 at 21:44
Are you having CORS issues? Does your API support CORS? Is this 404 that you are seeing actually a response to an `OPTIONS` request? — Darin Dimitrov, Mar 11 '17 at 21:45
No, I am not seeing network calls in dev tools and I don't really understand why so explanation would be helpful. As to my API supporting CORS, I am new to this so I just followed this tutorial [link](http://mherman.org/blog/2016/03/13/designing-a-restful-api-with-node-and-postgres/#.WMR1CvLJK4H) to create it and there was no mention of CORS, so I don't think it does. — vikiv, Mar 11 '17 at 22:12
When I call `fetch('http://localhost:3000/api/pattern', {method: 'GET'})` from dev tools console of the served application, I get normal response as well as network call. I have tried adding CORS support to my API and the response now has a header `Access-Control-Allow-Origin: *`, but that seems to do nothing so I probably didn't do it right. — vikiv, Mar 12 '17 at 10:36

score 2 · Answer 1 · edited Dec 17 '19 at 17:14

Vetemi's answer solved the first step of this issue for me. I had built my Angular App following along with the Angular Tour Of Heroes tutorial and removing the dependencies on the In Memory web api service resolved the 404 error. After that I was getting a CORS error, specifically the error read:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

My API is a .Net Core 2.0 API, so I needed to enable CORS which I did following the steps at this link

https://learn.microsoft.com/en-us/aspnet/core/security/cors

This is a trimmed down version of my Startup.cs file

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();
        services.AddMvc();
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseCors(builder => builder.AllowAnyOrigin());
        app.UseMvc();
    }

score 1 · Answer 2 · answered Aug 21 '17 at 09:39

In case, you haven't found the problem and for those who have the same problem.

Have you used the in memory database from the tutorial Angular Tour of Heroes? If yes, then this may be the problem. The dependency

"angular-in-memory-web-api": "~0.2.4",

intercepts your http requests. Removing this dependency might help. Solution was found here.

score 0 · Answer 3 · answered Mar 11 '17 at 21:45

0

Your header contains nothing, so the response is 404. See the below change

private getHeaders() : Headers {
    const headers = new Headers();
    headers.append('Accept', 'application/json');
    return headers;
}

Reason: Default return type of the methods are void, so when you are returning you need to explicitly have the return type

answered Mar 11 '17 at 21:45

Aravind

40,391
16
91
110

2

At the end of the day this will be compiled to plain javascript in which there's no notion of a return type for a function. So it doesn't really matter if you specify the return type in your typescript function signature or not, it will work the same either ways. The only benefit of explicitly specifying the return type of a function in your typescript code is that it will guard you against returning some different type, or not returning anything at all. – Darin Dimitrov Mar 11 '17 at 22:02

Angular 2 api call responds with 404 even though service works when tested

3 Answers3