Unable to register HttpClient service

BrettSandham commented 9 months ago

Description

Hi

I'm sure this is an ID10T user issue!

I am trying to follow https://learn.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view=aspnetcore-8.0&pivots=webassemblyn and cannot register an HttpClient Service. Minimum steps :

Create a new Project
Select "Blazor Web App" template
Choose Interactive render mode : WebAssembly
Add to Client.Program.cs builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
Add to Counter.razor @using System.Net.Http @inject HttpClient Http
run project and navigate to Counter page

Error An unhandled exception occurred while processing the request. InvalidOperationException: Cannot provide a value for property 'Http' on type 'HttpClientIssue.Client.Pages.Counter'. There is no registered service of type 'System.Net.Http.HttpClient'.

[Enter feedback here]

Page URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view=aspnetcore-8.0

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/call-web-api.md

Document ID

c7e59a08-1c60-32c2-75fd-33cb77ff7a5d

Article author

@guardrex

github-actions[bot] commented 9 months ago

🍂🎁 Happy Holidays! ❄️⛄

A green dinosaur 🦖 will be along shortly to assist. Stand-by ........

guardrex commented 9 months ago

Hello @BrettSandham ... That's due to prerendering. The service won't be available on the server, so the error is thrown.

It's covered in a general way here :point_right: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#client-side-services-fail-to-resolve-during-prerendering

For this specific case, there are two approaches to address it ...

Add the HttpClient services server-side, so they will be there for when the Counter component is prerendered. Use the following service registration in the main app's (the server app's) Program file:
```
builder.Services.AddHttpClient();
```
It's covered by the Server pivot of the article :point_right: https://learn.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view=aspnetcore-8.0&pivots=server
Since your interactive render mode is WASM and if you don't need to prerender the Counter component for any reason, you can prevent prerendering for the Counter page with the following Razor directive at the top of the file ...
```
@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
```
Therefore, it won't try to compile the component on the server, thus it won't 💥 on the missing HttpClient services.

Covered at :point_right: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#prerendering

Whichever direction you go, leave this issue open. I've been improving the guidance on these service scenarios, albeit slowly 🐌 due to all of the high priority issues that I'm still addressing. I'd like to use this issue to make further improvements to our coverage on this.

When I work on this, I'll take a couple of approaches to improve coverage ...

Add a section to this topic (WASM pivot) to call it out, name the two options that I just outlined, and cross-link to the Render Modes article for the general coverage.
Also, I don't think that I currently have a section in the Dependency Injection article on this subject. I'll work on covering this subject in both the Render Modes article, where it's currently covered, and in the DI article.

This issue will close automatically later when the PR merges, and I should be able to reach this in early '24. We're all just about to bug out of here for the ⛄🏂❄️ holiday break, so I won't be able to reach this until then.

Thanks for the issue and Happy New Year! 🎉🍾💃🕺🎆

BrettSandham commented 9 months ago

Thank you! Was not expecting such a prompt response this time of the year. All the best to you and the whole team.

dotnet / AspNetCore.Docs