Areas do not work when migrating an Angular app to NET 6

Question

I have an .NET Core 5 with Angular app and I have my controllers grouped in areas. I made the app using NET Core 1 and have successfully migrated it up to 5 without any problems, but migrating it to NET 6 gives me a 404 errors when I make API calls.

My current NET 5 setup looks like this:

[Authorize]
[ApiController]    
[Route("[area]/[controller]/[action]")]
public abstract class BaseController : Controller
{
}

[Area("Home")]
public abstract class HomeController : BaseController
{
}

public class AccountController : HomeController
{
    [HttpGet]
    public async Task<IActionResult> GetSomething()
    {
}

I created a new project in VS2022, copied everything, made the changes in Program.cs and changed BaseController to inherit ControllerBase.

The angular app works OK, but all my API calls return 404.

I didn't even have this in the NET 5 app, but I added it now just in case:

app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name : "areas",
            pattern : "{area:exists}/{controller=Home}/{action=Index}/{id?}"
        );
    });

but still no luck.

EDIT:

Using this answer, I listed all the routes and do get this:

{area: 'Home', controller: 'Account', action: 'GetSomething', name: null, template: 'Home/Account/GetSomething'}

and I still have no idea why it doesn't work.

Answer 1

Because of the proxy you have to list all the areas PROXY_CONFIG in proxy.conf.js. Add the area, or if you're using controllers, the controller names to the context property, eg:

context: ['/AdminApi', '/HomeApi' ... ]

Or, as a workaround, add /Api before all your calls and then have just that in the proxy settings