Issue with app.MapWhen() in .NET Core routing for multiple Angular projects

Question

I have a technical issue with the app.MapWhen() method in .NET Core for handling routes in my application.

Context

I have two Angular v15 projects serving as front-ends for my .NET Core 6 application.

• The back project located in wwwroot/back
• The survey project located in wwwroot/survey

Goal

I want the application to load the survey project when the URL is www.toto.com/survey and to load the back project for any other URL.

Configuration

Here is my current setup:

  app.UseFileServer(new FileServerOptions
  {
      FileProvider = new PhysicalFileProvider(
          Path.Combine(env.WebRootPath, "survey")),
      RequestPath = new PathString("/survey")
  });

  app.UseFileServer(new FileServerOptions
  {
      FileProvider = new PhysicalFileProvider(
          Path.Combine(env.WebRootPath, "back")),
      RequestPath = ""
  });

  app.UseEndpoints(endpoints =>
  {
      endpoints.MapControllers();
      endpoints.MapFallback(context =>
      {
          if (context.Request.Path.StartsWithSegments("/survey"))
          {
              context.Response.ContentType = "text/html";
              return context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "survey", "index.html"));
          }

          // Serve the index.html from back folder for all other paths
          context.Response.ContentType = "text/html";
          return context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "back", "index.html"));
      });
  });

Problem

Regardless of which project I try to load, if the URL contains a parameter (e.g., /survey), the index.html file is loaded correctly, but the JavaScript files are not. An error indicates that the wrong files are being loaded.

I only have the problem with /survey path, back works pretty well.

Question

How can I configure the routing and static file handling so that the correct JavaScript files are loaded for each project when their respective URLs are accessed?

Thank you for your help!

Answer 1

Here is a sample I start with asp.net core webapi .net6.

Startup.cs

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "wwwroot";
        });
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseHttpsRedirection();

        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.MapWhen(context => !context.Request.Path.StartsWithSegments("/survey"), mainApp =>
        {
            mainApp.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "back")),
                RequestPath = ""
            });

            mainApp.UseSpa(spa =>
            {
                spa.Options.SourcePath = "wwwroot/back";
                spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
                {
                    FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "back")),
                };
            });
        });

        app.MapWhen(context => context.Request.Path.StartsWithSegments("/survey"), surveyApp =>
        {
            surveyApp.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "survey")),
                RequestPath = "/survey"
            });

            surveyApp.UseSpa(spa =>
            {
                spa.Options.SourcePath = "wwwroot/survey";
                spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
                {
                    FileProvider = new PhysicalFileProvider(Path.Combine(env.WebRootPath, "survey")),
                };
            });
        });

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
}

My project structure is.

And the code showing the project.

console.log("Back Project JavaScript Loaded");

console.log("Survey Project JavaScript Loaded");

Test