Receiving 404 error code in new ASP.NET Core with Angular Visual Studio Solution for new APIController

Author: Richard Boroczky

How often do you create a new ASP.NET Core with Angular project? Seldom, correct? If that`s the case, you may have forgotten the little nuances with adding a new API controller and getting it to work with Angular while debugging. Seeing this 404 error and then testing the default WeatherForecast APIController and seeing that work may drive you crazy, as it just recently did to me while creating a POC. I have learned from my many years of experience that a bug that takes longer than 30 minutes to figure out is usually something very simple as was the case here.

To set the stage here I create a brand new ASP.NET Core with Angular project that had the default weather forecast API and decided to add a new APIController called payment, setting the route to payment and added the angular service to consume it and added an angular component to display the GET result. To my dismay, as I clicked the link to navigate to my new payment component which makes a GET request using the injected payment service I received a 404. I click the fetch data link for weather forecast and it works! I open PostMan to test the payment API and got a 404 there, but the weatherforecast API call works in PostMan.

What the heck did I do wrong? I am looking at the route, I am comparing both controllers to each other and I am also looking at the program.cs file to make sure I did not inadvertently screw something up and everything looks correct. I`ve done this hundreds of times, so what the heck is wrong?

Remembering the it is usually the simple things that cause the biggest headaches, I finally did a search to see everywhere that the weatherforecast API is being called and doing the same thing for the payment API. They all seem to match. However, I happened to eventually notice that my searches were excluding a few types of files such as JSON files. I set the find file types to be all files (*.*) and run the searches again. Low and behold the darn proxy.conf.js file shows up in my search results and a spark in my memory ignites reminding me I forgot to add the darn new payment API route here to the context entry so it bypasses angular routing. So next time you are tasked to create a new ASP.NET Core with Angular project, don`t forget to modify the proxy.conf.js file for your new API controllers. It`s the simple things that get you. Happy coding!