fix: IconService not available in MAUI blazorwebview

🐛 Bug Report

I’m hosting a blazor web app in a MAUI blazorwebview, see https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview?source=recommendations&view=net-maui-7.0.

Since MAUI does not support builder.Services.AddHttpClient(), exception raised when visiting a page that contains FluentIcon.

💻 Repro or Code Sample

Not available.

🤔 Expected Behavior

FluentIcon should be usable in MAUI blazorwebview.

😯 Current Behavior

blazor.webview.js raises exception: Unable to resolve service for type 'System.Net.Http.HttpClient' while attempting to activate 'Microsoft.Fast.Components.FluentUI.IconService'.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: Windows 11 (update)
• Browser: BlazorWebview
• .NET and FAST Version: .NET 7 and FAST 1.6.0

[vnbaaij]

I have a fix for this. In the latest commits (targeting 2.0 release) the IconService has been renamed to HttpBasedStaticAssetService. This is the service that will be used in Blazor Server and Blazor Web Assembly situations.

For Blazor Hybrid a new FileBasedStaticAssetService needs to be added to your Maui/Bazor solution. The file can currently not be added to the library because of dependency on NuGet packages that cannot be included in the Library project. Contents of the file:

using System.Net;
using Microsoft.Fast.Components.FluentUI.Infrastructure;

namespace Microsoft.Fast.Components.FluentUI;

public class FileBasedStaticAssetService : IStaticAssetService
{
    private readonly CacheStorageAccessor _cacheStorageAccessor;

    public FileBasedStaticAssetService(CacheStorageAccessor cacheStorageAccessor)
    {
        _cacheStorageAccessor = cacheStorageAccessor;
    }

    public async Task<string> GetAsync(string assetUrl, bool useCache = true)
    {
        string result = null;

        HttpRequestMessage message = CreateMessage(assetUrl);


        if (useCache)
        {
            // Get the result from the cache
            result = await _cacheStorageAccessor.GetAsync(message);
        }

        if (string.IsNullOrEmpty(result))
        {
            //It not in the cache (or cache not used), read the asset from disk
            result = await ReadData(assetUrl);

            if (!string.IsNullOrEmpty(result))
            {

                if (useCache)
                {
                    // If successful, create the response and store in the cache (when used)
                    HttpResponseMessage response = new()
                    {
                        StatusCode = HttpStatusCode.OK,
                        Content = new StringContent(result)
                    };

                    await _cacheStorageAccessor.PutAsync(message, response);
                }
            }
        }

        return result;
    }

    private static HttpRequestMessage CreateMessage(string url) => new(HttpMethod.Get, url);

    private static async Task<string> ReadData(string file)
    {
        using var stream = await FileSystem.OpenAppPackageFileAsync($"wwwroot/{file}");
        using var reader = new StreamReader(stream);

        return await reader.ReadToEndAsync();
    }
}

In your MauiProgram.cs make sure the following is added before the return builder.Build():

builder.Services.AddFluentUIComponents(options =>
{
        options.HostingModel = BlazorHostingModel.Hybrid;
});
builder.Services.AddScoped<IStaticAssetService, FileBasedStaticAssetService>();

[zh4ui]

Thanks! Can’t wait to see 2.0 release.