I have a problem with the standard Blazor template that I've expanded the content with more pages.
From the standard template, I want to call an external API (with my own base address). This page contains a list of customer table. This table will display "Loading.." upon page load, once the data is fetched from the API server, the table is then populated with data.
To my understanding, with this basic interaction, I need to implement this page on the Client side project (Webassembly). So I created a page with code-behind that fetch the data using typed HttpClient of CustomerServiceApiClient.
public class CustomerServiceApiClient(HttpClient client){ public async Task<PaginatedResponse<CustomerDto>> GetPaginatedCustomersAsync() { var result = await client.GetFromJsonAsync<PaginatedResponse<CustomerDto>>("customers"); return result ?? new PaginatedResponse<CustomerDto> { Data = [] }; }}The page that calls the client to fetch the data is implemented as.
public partial class CustomerSummaryPage : ComponentBase{ public PaginatedResponse<CustomerDto> PaginatedCustomers { get; set; } = new(); [Inject] private CustomerServiceApiClient? CustomerServiceApiClient { get; set; } protected override async Task OnInitializedAsync() { await GetCustomersAsync(); } public async Task GetCustomersAsync() { PaginatedCustomers = await CustomerServiceApiClient.GetPaginatedCustomersAsync(); }}The in Program.cs of the client project, the dependency injection and the HttpClient definition are added here.
// Dependency Injection of the typed HttpClientsbuilder.Services.AddScoped<CustomerServiceApiClient>();// Add typed HttpClient for all internal API callsbuilder.Services.AddHttpClient<CustomerServiceApiClient>(client => client.BaseAddress = new Uri(builder.Configuration["WebApi:CustomerServiceApi"])).AddHttpMessageHandler<AuthorizedHttpClientHandler>();However I get this error, saying the service was not registered.System.InvalidOperationException: Cannot provide a value for property 'CustomerServiceApiClient' on type 'Maliev.Intranet.Client.Pages.Customers.CustomerSummaryPage'. There is no registered service of type 'Maliev.Intranet.Client.Services.CustomerServiceApiClient'.
If I copy the dependency injection over to the server side project. The error is gone and the app starts but the base address is always null, but both of my appsettings.json in server project and client project are filled with values.
{"WebApi": {"BaseAddress": "https://xxx.xxx.xxx/xxx","CustomerServiceApi": "https://xxx.xxx.xxx/xxx/xxx/xxx","CurrenciesServiceApi": "https://xxx.xxx.xxx/xxx/xxx/xxx" },"Logging": {"LogLevel": {"Default": "Information","Microsoft.AspNetCore": "Warning" } }}How is it suppose to be done? The page and the typed HttpClient are implemented in the Client project. The page that wants to make an API call resides in the client project.