Search code examples
razorblazor

Use of NavLink not work in Razor Class Library that is loaded using LazyAssemblyLoader


When I try to add the NavLink markup into a Razor component in the Razor Class Library I obtain the next error:

Found markup element with unexpected name 'NavLink'. If this is intended to be a component, add a @using directive for its namespace.

The NavLink I wrote in razor component is:

<NavLink class="nav-link" href="@item.Name" Match="NavLinkMatch.All">
    <span class="oi @item.Name" aria-hidden="true"></span> @item.Name
</NavLink>

And the App.razor file is like this:

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<App> Logger
@inject HttpClient Http

<ErrorBoundary>
    <ChildContent>
        <Router AppAssembly="@typeof(App).Assembly"
                AdditionalAssemblies="@LazyLoadedAssemblies"
                OnNavigateAsync="@OnNavigateAsync">
            <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>
    </ChildContent>
    <ErrorContent Context="errorException">

        <div class="blazor-error-boundary">
            @{ OnError(@errorException); } @*calls custom handler*@
            @if (Utilities.IsDebug)
            {
                <p>@errorException.ToString()</p> @*prints exeption on page*@
            }
            else
            {
                <p>@(errorException.Message.AsNullIfEmpty() ?? errorException.GetType().FullName)</p> @*prints exeption on page*@
            }
        </div>>

    </ErrorContent>
</ErrorBoundary>

@code {
    private List<Assembly> LazyLoadedAssemblies = new List<Assembly>();

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if (args.Path == "" || args.Path == "menu1" || args.Path == "menu2")
            {
                IEnumerable<Assembly> assemblies = await AssemblyLoader.LoadAssembliesAsync(new[] { "MyProject.Test.dll" });
                LazyLoadedAssemblies.AddRange(assemblies);
            }
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
    }

    protected override void OnInitialized()
    {
//        UIEngine.Initialize();
        ComponentsService.Initialize(Http);
        base.OnInitialized();
    }

    public void OnError(Exception exception)
    {
    }
}

Solution

  • I solved adding the next line at top of the page:

    @using Microsoft.AspNetCore.Components.Routing;
    

    Sorry for the confusion.