fix: [ConfigurationGenerator not found] in [program.cs]

[madcoda9000]

🐛 Bug Report

1. ConfigurationGenerator not found
2. Icon not rendered in output.

💻 Repro or Code Sample

Program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using GroupVaultClient;
using Blazored.SessionStorage;
using GroupVaultClient.Helper;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.IdentityModel.Logging;
using Microsoft.Fast.Components.FluentUI;
using Blazored.LocalStorage;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddHttpClient();
//builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://localhost:7161/api/") });
builder.Services.AddBlazoredSessionStorage();
builder.Services.AddBlazoredLocalStorage();
builder.Services.AddScoped<AppAuthenticationStateProvider>();
builder.Services.AddScoped<AuthenticationStateProvider>(sp => sp.GetRequiredService<AppAuthenticationStateProvider>());
builder.Services.AddFluentUIComponents(options =>
{
    options.HostingModel = BlazorHostingModel.WebAssembly;
    options.IconConfiguration = ConfigurationGenerator.GetIconConfiguration();
    options.EmojiConfiguration = ConfigurationGenerator.GetEmojiConfiguration();
});
builder.Services.AddAuthorizationCore();

await builder.Build().RunAsync();

.csproj file

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
  </PropertyGroup>

  <PropertyGroup>
    <PublishFluentIconAssets>true</PublishFluentIconAssets>
    <FluentIconSizes>10,12,16,20,24,28,32,48</FluentIconSizes>
    <FluentIconVariants>Filled,Regular</FluentIconVariants>
    <PublishFluentEmojiAssets>false</PublishFluentEmojiAssets>
    <FluentEmojiGroups>Activities,Animals_Nature,Flags,Food_Drink,Objects,People_Body,Smileys_Emotion,Symbols,Travel_Places</FluentEmojiGroups>
    <FluentEmojiStyles>Color,Flat,HighContrast</FluentEmojiStyles>
</PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Blazored.LocalStorage" Version="4.4.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.10" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.10" PrivateAssets="all" />
    <PackageReference Include="Blazored.SessionStorage" Version="2.3.0" />
    <PackageReference Include="Microsoft.AspNet.WebApi.Client" Version="5.2.9" />
    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="6.0.21" />
    <PackageReference Include="Microsoft.CodeAnalysis" Version="4.6.0" />
    <PackageReference Include="Microsoft.Fast.Components.FluentUI" Version="2.4.2" />
    <PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.32.1" />
  </ItemGroup>

  <ItemGroup>
    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
  </ItemGroup>

</Project>

MainLayout.razor

@inherits LayoutComponentBase
@using Microsoft.Fast.Components.FluentUI.DesignTokens
@inject ILocalStorageService _localstorage;

<PageTitle>fluenttest</PageTitle>

<div class="container">
    <FluentDesignSystemProvider AccentBaseColor="#0078D7" BaseLayerLuminance="baseLayerLuminance" id="designProvider" class="designProvider" style="min-height: 100% !important;">
        <div class="siteheader">
            <div class="headerHeadline">
                <h3>GroupVault</h3>
            </div>            
            <div class="headerLinksContainer">
                <a href="/">Home</a>
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            </div>
            <div style="width:100%;display:flex;align-items: end;justify-content: end;margin-right:15px;">
                <div>
                    <span style="margin-right:10px;"><FluentIcon Slot="start" Name="@modeIcon" Size="@IconSize.Size16" Variant="@IconVariant.Filled" Color="@Color.Accent"/></span>
                    <FluentSwitch @bind-Value=darkMode @onclick="changeColorMode"></FluentSwitch>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="navigation">
                <NavMenu />
            </div>

            <div class="content">
                <main>
                    <article class="px-4">                       
                        <ErrorBoundary>
                            <ChildContent>

                                @Body
                            </ChildContent>
                            <ErrorContent Context="ex">
                                 <p class="error">@ex.Message</p>
                            </ErrorContent>
                        </ErrorBoundary>
                    </article>
                </main>
            </div>
        </div></FluentDesignSystemProvider>
    </div>

    @code {
        private float baseLayerLuminance {get;set;} = 100;
        private bool darkMode {get;set;} = false;
        private string modeIcon = FluentIcons.WeatherSunny;

        protected override async Task OnParametersSetAsync()
        {

                string dm = await _localstorage.GetItemAsync<string>("darkMode");

                if(dm!=null) {
                    if(dm=="true") {
                        baseLayerLuminance = 0;
                        darkMode = true;
                        modeIcon = FluentIcons.WeatherMoon;
                        await _localstorage.SetItemAsync<string>("darkMode", "true");
                            Console.WriteLine("OnParametersSetAsync darkmode: " + darkMode);
                    } else {
                        baseLayerLuminance = 100;
                        darkMode=false;
                        modeIcon = FluentIcons.WeatherSunny;
                        await _localstorage.SetItemAsync<string>("darkMode", "false");
                            Console.WriteLine("OnParametersSetAsync darkmode: " + darkMode);
                    }

            }
        }

        private async Task changeColorMode() {
            if(baseLayerLuminance==100){
                baseLayerLuminance = 0;                
                Console.WriteLine("changeColorMode: DarkMode:" + darkMode + " | baseLayerLuminance: " + baseLayerLuminance);
                await _localstorage.SetItemAsync<string>("darkMode", "true");
                StateHasChanged();
            } else {
                baseLayerLuminance = 100;                
                Console.WriteLine("changeColorMode: DarkMode:" + darkMode + " | baseLayerLuminance: " + baseLayerLuminance);
                await _localstorage.SetItemAsync<string>("darkMode", "false");
                StateHasChanged();
            }
        }
    }

🤔 Expected Behavior

As no error is thrown, i would expect, that the icon is getting rendered.

😯 Current Behavior

VScode is saying that the name ConfigurationGenerator is not known.

But it compiles without errors:

The problem is, that the icon is not displayed. Not even present in the html output!

>

💁 Possible Solution

🔦 Context

so, it would be nice if there is a way to get the icons working.

🌍 Your Environment

• OS & Device: [Linux] on [iPC]
• Browser [Google Chrome]
• .NET 7.0
• FAST 2.4.2

[vnbaaij]

The problem with not showing the icons comes from the fact that the ConfigurationGenerator can not be found.

It looks like source generators/analyzers are not supported on VS Code...If that is indeed true, then I'm afraid you cannot work on your project from a Linux/VS Code machine and you will need to use a Windows/VS machine.

[madcoda9000]

The problem with not showing the icons comes from the fact that the ConfigurationGenerator can not be found.

It looks like source generators/analyzers are not supported on VS Code...If that is indeed true, then I'm afraid you cannot work on your project from a Linux/VS Code machine and you will need to use a Windows/VS machine.

whoa, that would be a real showstopper at all :-( I'll try to test this on a windows machine.

Thank you for your answer.

[madcoda9000]

so, it seems not to be an linux issue only. I've tested it on windows 11 too.

[vnbaaij]

Yes, that is what I said, a VS Code issue... It works fine with 'normal' Visual Studio.

With v3 we will not be using this generator anymore. Have good hope that VS Code can be used then.

[madcoda9000]

okay, yes you're right :-(

I've done a test in VS2022 and vs2022 can resolve the namespace.

Anyway, the icon is not displaying too :-)

[vnbaaij]

Ok, now we're getting somewhere. It is also not displaying the icon outside of the switch, right? Can you share a repo or get me access to one?

[madcoda9000]

yes, as this is a private repo (https://github.com/madcoda9000/GroupVault). I've added you.

Greetings Sascha

[madcoda9000]

btw. i've tried this approach too.

<FluentSwitch @bind-Value=darkMode @onclick="changeColorMode" style="margin-inline-end: 12px;">
                        <span slot="checked-message"><FluentIcon Name="@FluentIcons.WeatherMoon" Size="@IconSize.Size16" Variant="@IconVariant.Filled" Color="@Color.Accent" /></span>
                        <span slot="unchecked-message"><FluentIcon Name="@FluentIcons.WeatherSunny" Size="@IconSize.Size16" Variant="@IconVariant.Filled" Color="@Color.Accent" /></span> 
                    </FluentSwitch>

But it is not working also.

[vnbaaij]

Ok, I managed to get icons to appear, but it was convoluted and I expect it will break at other points. How did I get icons to appear?

Cloned your repo locally. Added FluentUI project and FluentUI.Generator project Added following to project file:

Removed @Attribute [Authorize] from Login.razor (I don't think login page should have authorize at all) Removed @Attribute [Authorize] from Index.razor Start with F5 Navigate to https://localhost:7250/Index

Result:

So there is something in the autorization process/flow that messes up the icon rendering.

As we are on the brink of releasing the v3 version of the library, I won't be spending ore time in investigating/solving this. Upgrading to that version is advised. One of the key things we changed is how Icons/Emoji are handled. See https://preview.fluentui-blazor.net/UpgradeGuide for what you need to change.

Closing this as 'won't fix'

[madcoda9000]

ok, thank you for the information. I understand the upgrade guide and i understand what i have to do. But how can i use v3? In nuget i only can see 2.4.2.

[madcoda9000]

ahh, sorry my fault. I've to check the "include prerelease" checkbox. :-)

[vnbaaij]

I was about to post that...

ps. there is a PR waiting in your repo with upgrade done already...

[madcoda9000]

many thanks. The upgrade was totally smooth. and the Icons are displayed as expected. Many thanks for your help. And please keep up that great work!

Best Regards Sascha

[madcoda9000]

PS: I forgot to mention, now it works with vscode like charm :-)