I’m having trouble setting my basepath in a newly created Blazor Websassembly standalone app in .NET 9.
I’ve set<base href="/test/" /> in the index.html file, but when I run the application locally I get the following error message “An unhandled error has occurred. Reload 🗙”. The console is also full of 404 error messages.
The missing files in question are to still on their old locations when I try to reach them directly. (so without the /test/ prefix).
I’m following the official documentation of asp.NET.As far as I can tell there seems to be a difference between the project types Blazor Webassembly standalone and Blazor web app webassembly that the documentation does not account for.
What am I missing?
Edit:
Some clarification: The current goal is to run this website with visual studio 2022 locally and go to https://localhost:7276/test/ to see it.The documentation says only to change the <base> tag in the Index.html file, nothing else.
Edit2:
I've created a new Blazor Websassembly standalone app in .NET 9 with visual studio 2022.Code for program.cs (nothing altered).
using Microsoft.AspNetCore.Components.Web;using Microsoft.AspNetCore.Components.WebAssembly.Hosting;using BlazorApp6;var builder = WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });await builder.Build().RunAsync();code for Index.html. Here I only changed <base href="/" /> to <base href="/test/" />.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>BlazorApp6</title><base href="/test/" /><link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" /><link rel="stylesheet" href="css/app.css" /><link rel="icon" type="image/png" href="favicon.png" /><link href="BlazorApp6.styles.css" rel="stylesheet" /><link href="manifest.webmanifest" rel="manifest" /><link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" /><link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" /></head><body><div id="app"><svg class="loading-progress"><circle r="40%" cx="50%" cy="50%" /><circle r="40%" cx="50%" cy="50%" /></svg><div class="loading-progress-text"></div></div><div id="blazor-error-ui"> An unhandled error has occurred.<a href="." class="reload">Reload</a><span class="dismiss">🗙</span></div><script src="_framework/blazor.webassembly.js"></script><script>navigator.serviceWorker.register('service-worker.js');</script></body></html>When I run the project this is the error message I see:Errormsg1 and this is the console: Console