CODEWITHSUNDEEP
c#angularasp.net-coresingle-page-applicationendpoint
Michal Szura
Michal Szura

Reputation: 101

ASP.Net Core 6, SPA, endpoint - I can't call a controller from http get request

[SOLVED] - Solution in comment

[Problem]

I'm quite new in the business, so beg me pardon for a newbie question, but I struggle with ASP.Net Core 6 now and I think I'm missing sth simple, but I'm completely stuck... So, I tried to make a simple application to calculate BMI using C# and Angular SPA. I did it in .Net Core 5 and it is working fine, but for some reason, when I literally copied one-to-one all functions, it doesn't want to call a controller method in .Net Core 6. I started searching what has been changed between 5 and 6 versions and I see that Startup.cs is missing, instead, they merged it with Program.cs. Can this be a "problem" ? Below you can find my TS component code and controller code. If you could give any hint what can be a problem and why it works with 5, but not with 6...

For now, I just want to call Get() method from BmiController and receive 200 status code, nothing more, but everytime I send a http get request, I receive 404 not found.

Thanks in advance for any help :)

Program.cs

using BMICalculatorCore.Core;
using BMICalculatorCore.Core.Interfaces;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddTransient<ICalculator, MetricCalculator>();

builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html"); ;

bmicalculator.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bmicalculator',
  templateUrl: './bmicalculator.component.html',
  styleUrls: ['./bmicalculator.component.css']
})


export class BmicalculatorComponent implements OnInit {

  public unit: string;

  constructor(private http: HttpClient) {
    this.unit = "Metric";
  }

  ngOnInit(): void {
  }

  sendRequest() {
    this.http.get("https://localhost:44431/" + "bmictrl" + "/calculate").subscribe(result => {
    }, error => console.error(error));
  }
}

BmiController.cs

using Microsoft.AspNetCore.Mvc;

namespace BMICalculatorCore.Controllers
{
    [ApiController]
    [Route("bmictrl")]
    public class BmiController : ControllerBase
    {
        public BmiController()
        {
            
        }

        [HttpGet]
        [Route("calculate")]
        public IActionResult Get()
        {
            return Ok();
        }
    }

Upvotes: 1

Views: 4636

Answers (1)

Michal Szura
Michal Szura

Reputation: 101

I solved the problem. It appeared, when VS created the project, it created also proxy for all controllers (paths). When I created new controller, proxy was missing, that's why endpoint could not be found. What I've done is:

const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:21346';

const PROXY_CONFIG = [
  {
    context: [
      "/weather",
      "/bmicalc", // this was added
      "/helloworld", // this was added
      "/bmicalculator" // this was added
   ],
    target: target,
    secure: false
  }
]

module.exports = PROXY_CONFIG;

Adding proxy allowed the application to hit endpoint. Five-minute job, half of a day searching...

Upvotes: 8

Related Questions