ASP.NET Core 7 with multiple Angular instances

Question

I try to run under one ASP.NET Core 7 application with multiple localized Angular apps.

Currently I use the default ASP.NET Core web application template with --localize switch on Angular compile. This results in two Angular folders:

ClientApp/dist/en
ClientApp/dist/de

I tried to configure the mapping like this:

...
app.Map("/de",
    userApp =>
    {
        userApp.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp/dist/de";
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
                                                       {
                                                           FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "ClientApp", "dist", "de"))
                                                       };

            // if (app.Environment.IsDevelopment())
            //     spa.UseProxyToSpaDevelopmentServer("http://localhost:4000");
        });
    });
app.Map("/en",
    userApp =>
    {
        userApp.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp/dist/en";
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
                                                       {
                                                           FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "ClientApp", "dist", "en"))
                                                       };
        });
    });

app.MapFallbackToFile("index.html");

app.Run();

But when I request localhost:80/de, I get an error:

fail: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[1]

An unhandled exception has occurred while executing the request.

System.InvalidOperationException: The request reached the end of the pipeline without executing the endpoint: 'Fallback {*path:nonfile}'. Please register the EndpointMiddleware using 'IApplicationBuilder.UseEndpoints(...)' if using routing.

at Microsoft.AspNetCore.Builder.ApplicationBuilder.<>c.b__18_0(HttpContext context)
at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.b__1(HttpContext context, RequestDelegate next)
at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.b__0(HttpContext context, RequestDelegate next)
at Microsoft.AspNetCore.Builder.Extensions.MapMiddleware.InvokeCore(HttpContext context, PathString matchedPath, PathString remainingPath)

This solution worked under ASP.NET Core 5, but and the most examples I can find are way older.

Answer 1

I got it now to work, with these changes:

First I dropped app.MapFallbackToFile("index.html"); and moved it into the mappings like that spa.Options.DefaultPage = new PathString("/en/index.html");.

Second I had to add userApp.UseSpaStaticFiles(...).

And here the complete code:

app.Map("/de",
    userApp =>
    {
        userApp.UseSpaStaticFiles(new StaticFileOptions
                                  {
                                      FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "de"))
                                  });
        userApp.UseSpa(spa =>
        {
            spa.Options.DefaultPage = new PathString("/de/index.html");

            if (app.Environment.IsDevelopment())
                spa.UseProxyToSpaDevelopmentServer("http://localhost:4000");
        });
    });
app.Map("/en",
    userApp =>
    {
        userApp.UseSpaStaticFiles(new StaticFileOptions
                                  {
                                      FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "en"))
                                  });
        userApp.UseSpa(spa =>
        {
            spa.Options.DefaultPage = new PathString("/en/index.html");

            if (app.Environment.IsDevelopment())
                spa.UseProxyToSpaDevelopmentServer("http://localhost:4001");
        });
    });

app.UseWhen(context => !context.Request.Path.StartsWithSegments("/api"), appBuilder =>
{
    appBuilder.Use((Func<HttpContext, Func<Task>, Task>)((context, _) =>
                                                            {
                                                                context.Response.Redirect("/de");
                                                                return Task.CompletedTask;
                                                            }));
});

app.Run();