Blazor Core Hosted - Razor 类库项目中的所有组件都在页面上打印为 HTML
Posted
技术标签:
【中文标题】Blazor Core Hosted - Razor 类库项目中的所有组件都在页面上打印为 HTML【英文标题】：Blazor Core Hosted - all Components in Razor Class Library Project are being printed as HTML on the page 【发布时间】：2020-02-09 07:32:27 【问题描述】：我找不到类似问题的关键字，所以我发布一个新的。
项目运行良好，但突然发生了下面描述的问题。我只是在编辑 Razor 类库中的一些 Razor 文件，因此无法追溯到我所做的任何代码修改。
问题：
我的项目结构如下：
客户端、服务器和共享是最初由 NET Core 3.0 中的 Blazor 模板创建的项目。 DesktopClient 是与 ElectronNET 类似的 Blazor 项目，问题也发生在那边的组件上。SharedLibrary 项目是放置所有项目通用组件的项目，并且问题的根源显然来自哪里。
SharedLibrary 在 Client 项目中被引用，因此我可以访问 Client 项目中的组件。
发生的事情是，突然间，来自 Razor 类库的组件停止“编译”，所有“@”都被打印为原始 HTML，就像“计数器 2”的按钮一样：
[]
请注意图像上有 3 个按钮。第一个位于基本 Razor 页面中，并且正在正确编译。第二个来自 SharedLibrary 项目，显然没有被编译，因为“@”标签没有被替换d。第三个按钮来自 Client 项目（与基本 Razor 页面相同的项目）中的一个组件，并且工作正常。
所以问题是 SharedLibrary Razor 文件没有被“编译”。
我尝试过的：
从项目中删除和添加引用； 清理和重建解决方案； 更新包； 检查了 .csproj 以查看我是否能发现任何错误/缺失（在此文件上没有经验，因此可能遗漏了一些东西）。 创建了一个新的 Blazor Core 托管项目并添加了一个 Razor 类库，其设置与此演示相同。它工作得很好，所以这个项目的问题。依赖项和“.csproj”文件看起来非常相似。代码：
.csproj 用于客户端项目：
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<OutputType>Exe</OutputType>
<LangVersion>8.0</LangVersion>
<Nullable>enable</Nullable>
<RazorLangVersion>3.0</RazorLangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazor.Extensions.SignalR" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19465.2" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.0.0-preview9.19465.2" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Http.Abstractions" Version="2.2.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\..\SharedLibrary\SharedLibrary.csproj" />
<ProjectReference Include="..\Shared\ServerAPI.Shared.csproj" />
</ItemGroup>
<ItemGroup>
<Content Include="..\..\SharedLibrary\Content\styles\font\**\*.*">
<Link>wwwroot\styles\font\%(RecursiveDir)%(Filename)%(Extension)</Link>
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="..\..\SharedLibrary\Content\images\system\*.*">
<Link>wwwroot\images\system\%(RecursiveDir)%(Filename)%(Extension)</Link>
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="..\..\SharedLibrary\Content\images\social\brands\*.*">
<Link>wwwroot\images\social\brands\%(RecursiveDir)%(Filename)%(Extension)</Link>
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Compile Remove="bin\**" />
<Content Remove="bin\**" />
<EmbeddedResource Remove="bin\**" />
<None Remove="bin\**" />
<Content Remove="compilerconfig.json" />
</ItemGroup>
<ItemGroup>
<_ContentIncludedByDefault Remove="compilerconfig.json" />
<_ContentIncludedByDefault Remove="wwwroot\styles\main.css" />
</ItemGroup>
<ItemGroup>
<Folder Include="Properties\" />
<Folder Include="Services\" />
<Folder Include="wwwroot\images\system\" />
<Folder Include="wwwroot\scripts\" />
</ItemGroup>
<ItemGroup>
<None Include="compilerconfig.json" />
</ItemGroup>
<ItemGroup>
<Content Update="wwwroot\styles\main.css">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
</ItemGroup>
<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
<Copy SourceFiles="%(Content.Identity)" DestinationFiles="%(Content.Link)" SkipUnchangedFiles="true" OverwriteReadOnlyFiles="true" Condition="'%(Content.Link)' != ''" />
</Target>
</Project>
.csproj 用于 SharedLibrary
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<OutputType>Library</OutputType>
<IsPackable>true</IsPackable>
<BlazorLinkOnBuild>false</BlazorLinkOnBuild>
<LangVersion>8.0</LangVersion>
<Nullable>enable</Nullable>
<RazorLangVersion>3.0</RazorLangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazor.Extensions.SignalR" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview9.19465.2" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview9.19465.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.Extensions.Localization.Abstractions" Version="3.0.0" />
</ItemGroup>
<ItemGroup>
<Folder Include="Content\images\social\brands\" />
<Folder Include="Core\Login\" />
<Folder Include="Core\Login\OAuth2\" />
<Folder Include="Services\" />
</ItemGroup>
<ItemGroup>
<Compile Update="Resources\Languages\en-US.Designer.cs">
<DesignTime>True</DesignTime>
<AutoGen>True</AutoGen>
<DependentUpon>en-US.resx</DependentUpon>
</Compile>
</ItemGroup>
<ItemGroup>
<EmbeddedResource Update="Resources\Languages\en-US.resx">
<Generator>ResXFileCodeGenerator</Generator>
<LastGenOutput>en-US.Designer.cs</LastGenOutput>
</EmbeddedResource>
</ItemGroup>
</Project>
Index.razor
@page "/"
@using ServerAPI.Client.Components
@using SharedLibrary.Components.User
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code
int currentCount = 0;
void IncrementCount()
currentCount++;
<SocialWithFormLoginComponent />
<Counter />
SharedLibrary 项目中的SocialWithFormLoginComponent.razor
<h1>Counter 2</h1>
<p>Current count 2: @currentCount2</p>
<button class="btn btn-primary" @onclick="IncrementCount2">Click me 2</button>
@code
int currentCount2 = 0;
void IncrementCount2()
currentCount2++;
StateHasChanged();
Console.WriteLine("Hello world!");
客户端项目中的 Counter.razor
<h1>Counter 3</h1>
<p>Current count 3: @currentCount3</p>
<button class="btn btn-primary" @onclick="IncrementCount3">Click me 3</button>
@code
int currentCount3 = 0;
void IncrementCount3()
currentCount3++;
StateHasChanged();
Console.WriteLine("Hello world!");
最后的比赛
如您所见，我的故障排除代码非常简单，但项目并非如此，因此重新创建工作量很大。
有什么建议可以尝试吗？我真的很困惑。
提前致谢！
更新解决方案：
事实证明，正如@dani hererra 所发布的，我在附加的 Razor 类库中的组件的文件夹中缺少“_Imports.razor”，如下所示：
【问题讨论】：
【参考方案1】：检查Microsoft.AspNetCore.Components.Web 是否在_Imports.razor 上列出：
@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web //<-----
@using Microsoft.JSInterop
@using _your_namespace_
@using _your_namespace_.Shared
【讨论】：
是的，它在客户端项目中！在客户端项目上引用时，如何确保 SharedLibrary 正在使用程序集？ 谢谢，附加的“Razor 类库”的文件夹中确实缺少“_Imports.razor”。奇怪的是，我从一开始就没有这个文件并且它正在工作。感谢您的回复！以上是关于Blazor Core Hosted - Razor 类库项目中的所有组件都在页面上打印为 HTML的主要内容，如果未能解决你的问题，请参考以下文章
Blazor Core Hosted - Razor 类库项目中的所有组件都在页面上打印为 HTML
如何正确部署 Blazor WebAssembly（托管）应用程序？
使用 azure AD B2C 进行 blazor web api 身份验证
Azure AD 限制整个 ASP.NET Core API