1-й вы регистрируете одноэлементный экземпляр

services.AddSingleton<AppState, AppState>();

для меня это выглядит немного странно. ИМХО так и должно быть

services.AddSingleton<IAppState, AppState>();

or

services.AddSingleton<AppState>();

Но проблема не в этом.

Вы добавляете эту услугу в компонент, и это здорово.

[Inject]
public AppState AppState { get; set; }

И вы стираете этот экземпляр компонента с новым, полученным из веб-API

protected override async Task OnInitializedAsync()
{
    AppState = await Http.GetJsonAsync<AppState>(ConfigFiles.GetPath("appsettings.json"));
    await Task.FromResult(0);
}

Их снова код странный, он должен быть

protected override async Task OnInitializedAsync()
{
    AppState = await Http.GetJsonAsync<AppState>(ConfigFiles.GetPath("appsettings.json"));
}

Но это не сбрасывает экземпляр singleton, который вы вводите во второй компонент. Это просто заменит экземпляр в вашем 1-м компоненте.

• Вы должны зарегистрировать свою службу с

services.AddSingleton<AppState>(provider =>
{
    var http = provider.GetRequiredService<HttpClient>();
    return http.GetJsonAsync<AppState>(ConfigFiles.GetPath("appsettings.json")).ConfigureAwait(false).GetAwaiter().GetResult();
});

Таким образом, вы делаете всего один вызов appsettings.json за время существования приложения.

• И удалите OnInitializedAsync код.

Асинхронный

Но на самом деле лучший способ добиться этого - зарегистрировать Task, возвращающий ваши настройки

services.AddSingleton(provider =>
{
    var http = provider.GetRequiredService<HttpClient>();
    return http.GetJsonAsync<AppState>("appsettings.json");
});

Вы можете внедрить его в свои компоненты с помощью

[Inject]
public Task<AppState> AppStateAsync { get; set; }

public AppState AppState { get; set; }

protected override async Task OnInitializedAsync()
{
    AppState = await AppStateAsync;
}

И использовать его с

@page "/"
@inherits IndexComponent

<p>@AppState.BaseUrl</p>