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

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!

Answer 1

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();
}

Answer 2

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.

Answer 3

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