I am struggling to retrieve and display data from a C# Web API using Typescript and Angular. As someone new to Typescript, I followed a tutorial to create a service based on this guide: [https://offering.solutions/blog/articles/2016/02/01/consuming-a-rest-api-with-angular-http-service-in-typescript/][1]
The service is consumed within a module called Categories.
However, I am encountering difficulties in getting the response back and rendering it as a table on the Categories page.
In my environments.ts file, I have configured the URL settings like this:
export const environment = {
production: false,
server: 'http://localhost:5001/',
apiUrl: 'api/',
};
Within the service, there is a `get` method defined as follows:
getAll<T>(): Observable<T> {
return this.http.get<T>(this.actionUrl);
}
The `this.actionUrl` is constructed using the variables declared in the environment (server and apiUrl).
On the Server side, there is a `GetCategory` method in the Web API that I need to call.
In the CategoriesController.cs:
// GET: api/Categories
[HttpGet(Name = nameof(GetCategory))]
public string GetCategory()
{
var list = _context.Category.ToList();
var json = JsonSerializer.Serialize(list);
return json;
}
Upon running the application, I encounter the error message:
Failed to load resource: net::ERR_EMPTY_RESPONSE :5001/api/:1
Additionally, the Edge browser console displays:
GET http://localhost:5001/api/ net::ERR_EMPTY_RESPONSE
As a result, the categories page remains empty.
If I manually enter the Web API URL into the browser (https://localhost:5001/api/Categories/), I can successfully receive the JSON response.
My question is how do I map the URL correctly for it to function according to the tutorial I followed?
The technologies I am utilizing include .NET Core 3.1, C#, TypeScript, Angular CLI 8.3.26, and the Angular web template in Visual Studio Community 2019. [1]: