ASP.NET Core Web API : redirection to Angular

Question

It seems the Angular redirection from with-in ASP.NET Core Web API is not working in a shared deployment. I am using ASP.NET Core 7 for the Web API. The current setup works perfectly with ASP.NET Core 6.

This screenshot shows my build files structure:

The ASP.NET Core Web API build files are shown in this screenshot, wwwroot folder contains the Angular build files:

This is the program.cs code of the ASP.NET Core Web API:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

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

    if (context.Response.StatusCode == 404 && !System.IO.Path.HasExtension(context.Request.Path.Value))
    {
        context.Request.Path = "/index.html";
        await next();
    }
});

app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();

app.Run();

I am aware these lines of code from program.cs are responsible to redirect the request to Angular application when the requested URL doesn't match with any of the end points:

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

    if (context.Response.StatusCode == 404 && !System.IO.Path.HasExtension(context.Request.Path.Value))
    {
        context.Request.Path = "/index.html";
        await next();
    }
});

I have deployed the above folder structure (Image 1) to an Azure App Service.

When I hit https://sitename.azurewebsites.net/weatherforecast, I get the API response.

However when I hit https://sitename.azurewebsites.net, since no such endpoint exists in the Web API, I expect the request to be redirected to index.html inside the wwwroot folder so that the Angular page is rendered - but I get "HTTP 404 - not found" error instead.

When I host the Web API (https://sitenameapi.azurewebsites.net) and Angular app (https://sitenameangularapp.azurewebsites.net) as 2 separate Azure App Service (of course I handled the CORS part), the application works. I suspect the redirection from the Web API to the Angular app is the root cause, however I am not able to resolve it. Any help would be greatly appreciated.

Rena · Accepted Answer · 2024-04-11 02:54:19Z

1

We can achieve your requirement through the middleware of static files in ASP.NET Core, follow the code below:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();


app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAuthorization();


app.MapControllers();
app.MapFallbackToFile("index.html");

app.Run();

Then you can build/publish your angualr project, and we can get below files then paste then into wwwroot folder(if not this folder,we need to create it manually).

answered Apr 11, 2024 at 2:54

Rena

37.2k7 gold badges50 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.NET Core Web API : redirection to Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related