1

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

Michal Szura
  • 101
  • 1
  • 8
  • does your application run on `https://localhost:44431` ? what happens when you browse `https://localhost:44431/bmictrl/calculate` in the browser? – Chetan Dec 12 '21 at 17:19
  • Yeah, app goes on the port, checked. When I browse https://localhost:44431/bmictrl/calculate empty page appears. Postman says : "cannot GET /bmictrl/calculate" – Michal Szura Dec 12 '21 at 18:49
  • If you solved your question, you can self-answer to share how you fix it ! – Elikill58 Dec 18 '21 at 09:36

1 Answers1

8

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...

Michal Szura
  • 101
  • 1
  • 8
  • 1
    thanks for this, you've just saved me pulling more of my hair out. A bit rubbish that you have to register with the proxy as well – GrahamJRoy Oct 18 '22 at 08:44
  • 1
    The entries you've added here in the context don't seem to match the controller name or the route. Did you change them? Id expect to see `bmictrl` and possibly `bmi` in here? – Christian Phillips Feb 20 '23 at 12:45
  • thanks for this ,Faced same issue in Net 6.0 Angular SPA Application. when running application two ports running .one for API and another for angular APP (so called proxy server port) . found answer here need to register controller filename in context property of proxy.conf.js angular app to make it work. As another approach changing property as context: "/**" or context: "/api/**" . reference https://stackoverflow.com/questions/71830055/proxy-conf-js-not-working-in-asp-net-core-app-with-angular. – Microtechie Apr 15 '23 at 21:13