API Testing / DB Connections in Angular17

Question

I'm currently working creating a web app using Asp.Net Core (back) & Angular17 (front). I created the class models for my tables in my project with the DbContext, here the code used for the DbContext (I changed private information for obvious reasons):

using Microsoft.EntityFrameworkCore;

namespace App.Models.MyEntity
{
    public partial class MyEntity: DbContext
    {
        public MyEntity(DbContextOptions<MyEntity> options)
            : base(options)
        {
        }

        public virtual DbSet<Employee> Employee { get; set; }
    }
}

In my Startup.cs I added the connection to that DB:

public void ConfigureServices(IServiceCollection services)
{
   services.AddDbContext<MyEntity>(options =>
      options.UseSqlServer(Configuration.GetConnectionString("MyEntity")));
}

And finally in my 'appsettings.json' I added the ConnectionString:

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
  "MyEntity": "Server=MyServer;Database=DB1;User Id=UserId;Password=password1;MultipleActiveResultSets=True;" 

  }
}

After setting up all those things I tried testing my API inside my Angular code using this:

export class PDSLoginComponent {
  private apiUrl = 'https://localhost:44612/';

  loginData = {
    UserId: ''
  };
  getEmployeeData(input: string) {
    this.http.get<any>(`${this.apiUrl}api/Employees/GetEmpNameByClock?clockNo=${clockNo}`).subscribe(
        data => {
          console.log(data);
        }, error => {
          console.log("What's the error? ",error);
          this.toastr.error(error, "Error");
        }
      );
  onLogin() {
    this.getEmployeeDataByClock(this.loginData.UserId);
  }
}

Why am I getting this next error: polyfills.js:23 GET https://localhost:44359/api/Employees/GetEmpNameByClock?clockNo=7284 404 (Not Found)

1. I have tried looking syntaxis errors but the strings seems to be right,
2. I reviewed that the connection strings have the right credentials.
3. My backend and fronted are running together at the same time.
4. I'm importing all necessary libraries and dependencies are up to date.

I don't know what else should I look up.

Answer 1

After a research and Thanks to Achim Schnell comment I took a different perspective. The problem was not the 'ConnectionStrings' or the configuration on my 'Startup.cs' file. The problemas was actually the controller. I was using the 'api' prefix in my route, that was part of the problem.

I was using "ApiController" Instead of "ControllerBase" on my Controller, here's how I configured my Controller to be able to use my DB:

[Route("api/[controller]")]
[ApiController]
public class EmployeesController : ControllerBase //Here I used 'ApiController'
{
    private readonly MyModel _ctx;

    public EmployeesController(MyModel ctx){
       _ctx = ctx;
    }

    [HttpGet("GetEmployeeByClock/{clockNo}")]
    public IActionResult GetEmpByClock(string clockNo){

        /* REST OF MY QUERIES AND FUNCTIONALITY */

    }
}

Answer 2

I'm pretty sure the default route for api-controllers in current vs doesn't include 'api'.

Generally - your request from the frontend should be reaching your backend but your backend is unable to find a controller with matching: Method and Http attribute

Since you didn't include the code of your controller and route-configuration - a real answer for your problem is complicated.

To resolve this problem: Just write a request to your API yourself and check which URL/Verb works or doesn't work. I'd expect the error in the controller.