blazormaui-blazor

.Net 8 Blazor Hybrid cannot read the MainLayout component in a shared Razor Class Library

I'm trying to use a Razor Class Library to share components to two Blazor apps: Web and Hybrid. On web project, the shared library works great. But I cannot make it work with the Hybrid project. Look the window below: enter image description here

According to the second div into body, it seems the app cannot find the MainLayout component:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>Super Barato</title>
    <base href="/" />
    <link rel="stylesheet" href="_content/SuperBarato.Web.Shared/app.css"  />
    <link rel="stylesheet" href="SuperBarato.Hybrid.styles.css"  />
    <link rel="icon" type="image/png" href="_content/SuperBarato.Web.Shared/favicon.ico" />
</head>

<body>

    <div class="status-bar-safe-area"></div>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>

</body>

</html>

The Routes component is one and it's on shared library. Even adding AdditionalAssemblies, the app doesn't work:

<Router AppAssembly="@GetType().Assembly"
        AdditionalAssemblies="new[] { typeof(MainLayout).Assembly, typeof(Home).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Follow the Hybrid MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:shared="clr-namespace:SuperBarato.Web.Shared;assembly=SuperBarato.Web.Shared"
             x:Class="SuperBarato.Hybrid.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type shared:Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

Follow the solution tree: enter image description here

Solution

  • .Net 8 Blazor Hybrid cannot read the MainLayout component in a shared Razor Class Library

    About using RCL in MAUI Balzor, you can refer to the official doc: Consume ASP.NET Core Razor components from a Razor class library (RCL). Follow the steps the doc provided.

    @page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />