Routable componet of Razor Class Library not displayed in ASP.NET Core 6.0 WebAssembly

Question

I have an ASP.NET Core 6.0 WebAssembly in which I have included a Razor class library. The library contains several components, including three that use the @page directive. After a login (implemented with IdentityServer4) it is directed to one of the routable components from the library. The problem: the component is not displayed...

I checked the following:

• The library is referenced by the WebAssembly
• In App.razor I added AdditionalAssemblies="new[] { typeof(Helper).Assembly, typeof(Confirmation).Assembly, typeof(HelperRegistration).Assembly }".

I found the following:

• No errors are displayed in either the Visual Studio output or the browser DevTools console.
• Nothing is noticeable in the Network tab of Browser DevTools.
• protected async override Task OnInitializedAsync() of the routable component is called.

I tried this:

• Call the StateHasChanged() method of the layout component from the OnInitializedAsync() method. The idea behind it was that Trigger rendering of the component from the library.

The components in the Razor class library were previously implemented directly in the Blazor WebAssembly and that's how it all worked! My goal is to integrate the library later with lazy load.

Answer 1

You should be able to test your library pages like this:

1. Set one of your library pages with a @page "/"
2. Set App AppAssemblyto point to a class library. Here's an example below.

<Router AppAssembly="@typeof(Blazor.App.UI.App).Assembly">
...

What happens. Does the library route load as the default route?

Additional Information based on Response

I have this in one of my test solutions, which works. Note I use fully qualified namespace names. Blazor.App.UI.Index is the index page which is in the Blazor.App.UI assembly/namespace. I also like to keep my Razor very clean, which is why the list is defined in the @code block.

@namespace Blazor.App.UI
@using System.Reflection

<Router AppAssembly="@typeof(Blazor.App.Core.ListOptions).Assembly" AdditionalAssemblies="@Assemblies">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    private List<Assembly> Assemblies => new List<Assembly>() { typeof(Blazor.App.UI.Index).Assembly  };
}

In your line:

AdditionalAssemblies="new[] { typeof(Helper).Assembly, typeof(Confirmation).Assembly, typeof(HelperRegistration).Assembly }"

Are Helper, Configuration and HelperRegistration in the same assembly? If so then you should only reference the assembly once.