Migrating from Blazor wasm hosted .NET 7 to Blazor web app .NET 8

Question

I followed all instructions on how to migrate a Blazor wasm hosted to Blazor web app.

The problem is client project couldn't communicate with server even everything is configured.

• I added AddScoped for HttpClient and set BaseAddress
• I added AddHttpClient at server
• I added API controllers to server
• I configured controllers route

It always throws this error

InvalidOperationException: An invalid request URI was provided. Either the request URI must be an absolute URI or BaseAddress must be set.

When I specify base address inside component with _httpClient injected, it reaches the controller action but not all of them. My components calls don't work.

Is there anything missing or they change the way on .NET 6 and 7 at the new .NET 8 version?

In client Program.cs:

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

In server Program.cs:

builder.Services.AddHttpClient();
builder.Services.AddControllers();

.......

app.MapDefaultControllerRoute();

Connection string is in the appsettings.json file.

My frontend template is at server wwwroot.

Here is my home component at client project and I tried it at server project

@page "/"
@attribute [Authorize]
@rendermode InteractiveAuto

<div class="text-center" style="margin-top:150px">
    <h1>@_sharedLocalizer["WelcomeToOrax"]</h1>
    <SurveyPrompt Title="@(_sharedLocalizer["UnderDevelopment"])" />
</div>

<h1>@message</h1>
<h1>@_httpClient.BaseAddress</h1>
@code{      
    string message = "";
    protected override async Task OnInitializedAsync()
    {
        try
        {
            //message += await _httpClient.GetFromJsonAsync<string>($"https://localhost:44355/api/Test/GetSample");
            var response = await _httpClient.GetAsync("api/Test/GetSample");
            //var response = await _httpClient.GetAsync($"https://localhost:44355/api/NavMenu/GetSystems2");
            if (response.IsSuccessStatusCode)
            {
                message += " - success";
                var result = response.Content.ReadAsStringAsync();
                if (result is not null)
                {
                    message += " - valid result - ";
                }
                else
                {
                    message += " - not valid result";
                }
            }
            else
            {
                message += " - not success";
            }

        }
        catch (Exception)
        {
            throw;
        }
    }
}

Why don't my old components work?

Answer 1

I was just searching for this exact issue, I have a ASP.NET Core hosted Blazor WASM and the official documentation helped me.

However the <Routes ... /> tag doesn't accept ChildContent which leads to another issue... Blazor .Net 8 splash screen

Answer 2

Try putting the following on your client components:

@rendermode InteractiveWebAssembly

That way they will render on the client side. Your component has "@rendermode InteractiveAuto" which will render it on the server first. I find it easier just not to use auto. The first-time load time savings is not worth it for me.