.NET 8 Blazor Hybrid无法读取共享Razor类库的MainLayout组件

我通过Razor类库（RCL）向Blazor Web和Blazor Hybrid应用共享组件，Web项目中共享库可正常工作，但Hybrid项目运行异常。从页面body内的第二个div可见，应用无法找到MainLayout组件。Routes组件位于共享库中，即便配置了AdditionalAssemblies，问题仍未解决。

相关代码片段 #

共享库中的Router配置（Routes.razor） #

<Router AppAssembly="@typeof(App).Assembly"
        AdditionalAssemblies="new[] { typeof(SharedComponents.Routes).Assembly }">
    <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>

Hybrid项目的index.html #

<!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" />
    <title>BlazorHybridApp</title>
    <base href="/" />
    <link href="_content/SharedComponents/styles.css" rel="stylesheet" />
    <link href="BlazorHybridApp.styles.css" rel="stylesheet" />
</head>
<body>
    <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"></script>
</body>
</html>

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:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             x:Class="BlazorHybridApp.MainPage">

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

</ContentPage>

解决方案结构 #

解决方法 #

1. 确认MainLayout的命名空间引用
   在共享库的Routes.razor顶部添加MainLayout所在命名空间的引用，比如@using SharedComponents.Layouts；或者直接使用完整类型名指定布局，例如@typeof(SharedComponents.Layouts.MainLayout)。

2. 检查Hybrid项目的引用配置
   确保Blazor Hybrid项目已正确添加Razor类库的项目引用（本地开发避免用NuGet引用），且RCL已成功编译。

3. 在MauiProgram.cs中手动注册共享库程序集
   在Hybrid项目的MauiProgram.cs中，注册BlazorWebView时显式添加共享库的程序集：

   builder.Services.AddMauiBlazorWebView();
   builder.Services.AddBlazorWebView().AddAdditionalAssemblies(typeof(SharedComponents.Routes).Assembly);
   

4. 验证MainLayout的组件结构
   检查共享库中MainLayout.razor的语法是否正确，确保继承自LayoutComponentBase且包含@Body占位符，示例：

   @inherits LayoutComponentBase
   
   <div class="page">
       <div class="sidebar">
           <NavMenu />
       </div>
       <main>
           <article class="content px-4">
               @Body
           </article>
       </main>
   </div>
   

5. 清理重建解决方案
   右键解决方案选择「清理」，手动删除所有项目的bin和obj文件夹，再重新生成整个解决方案，避免缓存导致的加载异常。

内容的提问来源于stack exchange，提问作者Sérgio Damasceno