[ASP.Net] Handling 404 Errors in Angular Web Apps with ASP.NET Core

Table of Contents

• Introduction
• The Problem
• The Solution
• Code Example

Introduction

When developing WebAPI servers using ASP.NET Core, it's common to deploy an Angular front-end within the wwwroot folder. Often, the Angular app handles routing separately, leading to issues when users refresh the page.

The Problem

Since ASP.NET Core processes HTTP requests before Angular’s routing takes effect, the server may not recognize client-side routes. As a result, refreshing a page within the Angular app results in a 404 Not Found error.

The Solution

To resolve this, we can implement middleware that redirects unknown routes back to the root path (/), allowing Angular to handle routing properly.

Code Example

app.Use(async (context, next) =>
{
    await next();

    if (context.Response.StatusCode == 404)
    {
        context.Request.Path = "/";
        await next();
    }
});