ASP.Net Core Web API URLs call gets rerouted to Angular project

Question

I have a project in ASP.Net Core 8 and Angular 17 using Visual Studio 2022 version 17.9.0.

I am using the new "Angular and ASP.Net Core" project template. And I just have a stickler of a problem. I am following along with a book by Packt and building a project called WorldCities.

So far it's pretty basic. On the Angular side I just have app.component.html holding a NavMenu component and a router-outlet tag to hold the appropriate component for the route.

<app-nav-menu></app-nav-menu>
<div class="container">
   <router-outlet></router-outlet>
</div>

In app-routing.module.ts I only have one route for the default Home Component:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Something new here in Angular 17 I noticed. The app-routing module exists out of the box and you don't have to register it in the root module anymore. It's already done. So I just added the Home component route.

Here is my launch.json so the Angular project is running on port 4200.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "localhost (Chrome)",
      "url": "https://localhost:4200",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "edge",
      "request": "launch",
      "name": "localhost (Edge)",
      "url": "https://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Here is my one generic API rule in proxy.config.js

const PROXY_CONFIG = [
  {
    context: [
      "/api",
    ],
    target: "https://localhost:40443",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

So, if the Angular app calls any API it should be able to find it. But I am not even using this yet. I just have a Web API Controller with a URL I am typing directly into the browser to seed the database which I will get to.

On the ASP.Net Core Web API side, in launchSettings.json, here is the https profile configuration:

"https": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": false,
  "launchUrl": "swagger",
  "applicationUrl": 
"https://localhost:40443;http://localhost:40080",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development",
    "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": 
"Microsoft.AspNetCore.SpaProxy"
  }
}

Then I have SeedController class with an api route and an import action.

[Route("api/[controller]/action")]
[ApiController]
public class SeedController : ControllerBase
{
    private readonly ApplicationDbContext _context;
    private readonly IWebHostEnvironment _env;

    public SeedController(
        ApplicationDbContext context,
        IWebHostEnvironment env
        )
    {
        _context = context;
        _env = env;
    }

    [HttpGet]
    public async Task<ActionResult> Import()
    {
        // seed code here
    }
}

When I run the project the Angular Live Development Server is running in one console:

And the ASP.Net Core Web API project is hosted by Kestrel in another console.

And the home component is loaded into the browser along with the NavMenu component (using Angular Material)

So, here is the problem. When I open a browser to seed the database and type in for the URL:

https://localhost:40443/api/Seed/Import

I get a 404.

There is also some other strange behavior.

If I just type in localhost:40443:

It reroutes back to the Angular application. It definitely should not do that. What is causing this behavior?

As I was building this up I discovered this problem with the out of the box sample weather forecast API and thought I had fixed it somehow just to get everything working right and test the Angular API proxy rule and I thought I got it working somehow. I can't remember what the problem was. Then I ripped out all the weather forcast stuff since it won't be needed. Now this pesky problem is back. Has anyone run into this before and solved it? Otherwise I have to start this 77 page chapter over again and see if I can make it work. It's kind of confusing because the author builds an application called HealthChecks earlier in the book and then tells you to just repeat the steps to build up WorldCities. He mentions all the steps but doesn't reference the page numbers and the steps he mentions are kind of out of wack with the actual build up for HealthChecks.

Answer 1

In your SeedController you have the Route defined as [Route("api/[controller]/action")] when you call the localhost you use https://localhost:40443/api/Seed/Import in your case it should be https://localhost:40443/api/Seed/action/Import

Answer 2

It turns out I had specified the route wrong in the Route attribute on the controller.

I had the literal word action in there:

[Route("api/[controller]/action")]

It should be:

[Route("api/[controller]/[action]")]

Now in the URL:

https://localhost:40443/api/Seed/import

It will go to the Seed controller and then the import action.