ASP.NET Core and Angular Deployment - page refresh gives 404 error

Question

I am working on a project in Angular and ASP.NET Core hosted on Plesk. The project is working fine except the page refresh yields the 404 page not found error. Whenever I hit refresh from the browser or reload the page, it gives the 404 error.

The structure of the files it's in the picture below.

The content in web.config is:

In the "wwwroot" folder I have the build from Angular, where I created a "web.config" file with the following content:

Also in the "wwwroot" folder, I have the "index.html" file with the following content:

Please guide me to solve this issue.

Thanks!

Answer 1

Did you try adding

 <action type="Rewrite" url="./index.html" />

instead of

 <action type="Rewrite" url="/" />

Answer 2

I ran in the same problem last night, but with a Vue application that uses ASP .net 6.0 in the backend. The reason of the error is well explained here, but I used a different solution to solve this problem.

My solution was adding a MapFallbackTocontroller controller in program.cs:

app.MapControllers();
app.MapFallbackToController("Index", "Fallback");

await app.RunAsync();

and then creating said FallbackController.cs:

[AllowAnonymous]
public class FallbackController : Controller
{
   public IActionResult Index()
   {
      return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "index.html"), "text/html");
   }
}