Blazor .NET 8 WASM复制URL报错：未注册ApiClient服务

问题根源 #

全局InteractiveWebAssembly模式下，页面首次加载或刷新时，Blazor会先在服务器端执行预渲染。你的ApiClient仅在客户端Program.cs中注册，服务器端的服务容器中没有该服务，导致预渲染组件时无法解析依赖，抛出InvalidOperationException。

解决方法 #

方法1：在服务器端注册ApiClient服务

在服务器端Program.cs中添加ApiClient的注册，预渲染阶段即使不需要实际调用API，只要服务容器能找到实例即可：

// 服务器端Program.cs（在builder.Build()之前添加）
builder.Services.AddScoped<ApiClient>(sp =>
{
    var baseAddress = new Uri(builder.HostEnvironment.BaseAddress);
    return new ApiClient(baseAddress, new HttpClient { BaseAddress = baseAddress });
});

注：如果预渲染阶段不需要调用API，也可以返回一个空实现或模拟实例，避免不必要的网络请求。

方法2：强制组件仅在客户端渲染

给需要注入ApiClient的组件指定InteractiveWebAssembly渲染模式，跳过服务器端预渲染：

• 在Razor组件头部添加：

@rendermode InteractiveWebAssembly
@inject ApiClient Api

• 或者在组件类上添加特性：

using Microsoft.AspNetCore.Components;

[RenderModeInteractiveWebAssembly]
public partial class Sections : ComponentBase
{
    [Inject]
    public ApiClient? Api { get; set; }
    // 组件逻辑
}

方法3：延迟API调用至客户端渲染完成

如果不想修改服务注册或渲染模式，可在OnAfterRenderAsync中延迟获取服务并调用API（仅在客户端执行）：

private ApiClient? _api;
[Inject]
private IServiceProvider? ServiceProvider { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && ServiceProvider != null)
    {
        _api = ServiceProvider.GetRequiredService<ApiClient>();
        // 执行API调用逻辑
        var response = await _api.YourEndpointMethodAsync();
        // 更新组件状态
        StateHasChanged();
    }
}

推荐方案 #

优先选择方法1或方法2：

• 方法1适合需要预渲染UI的场景，保证页面加载时的内容展示；
• 方法2适合不需要预渲染的组件，直接在客户端初始化，逻辑更简单。

内容的提问来源于stack exchange，提问作者John Marsing