0
votes

I haven't been able to find the keywords for a similar issue, so I'm posting a new one.

The project was working fine and suddenly the issue described below happened. I was only editing some Razor files from the Razor Class Library, so I was unable to trace it back to any code modification I made.

The Issue:

I have the following project structure:

enter image description here

The Client, Server and Shared are projects that were initially created by the Blazor Template in the NET Core 3.0. DesktopClient is a similar Blazor project with ElectronNET and the issue is also happening on the component over there.The SharedLibrary project is the project where the components common to all projects are placed and where the root of the issue is apparently coming from.

The SharedLibrary is referenced on the Client project so I can access the components in the Client project.

What happened is that suddenly the components from the Razor Class Library stopped being "compiled" and all "@" are being printed as Raw HTML like the button for the "Counter 2":

[enter image description here]

Notice as how there are 3 buttons on the image. The first one is in the base Razor page and is being compiled correctly. Second one is from the SharedLibrary project and is not being compiled apparently as the "@" tag is not being replaced. And the third button is from a Component in the Client project(same project as the base Razor page) and is also working correctly.

So the issue is that the SharedLibrary Razor files are not being "compiled".

What I've tried:

  • Remove and add reference from project;
  • Clean and rebuild solution;
  • Update packages;
  • Checked .csproj to see if I could find anything wrong/missing (not experienced on this file, so might have missed something).
  • Created a new Blazor Core Hosted project and added a Razor Class Library with the same setup as this demo. It worked fine, so the problem in on this project. Dependencies and ".csproj" files seem very similar.

The code:

.csproj for Client project:

  <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 for 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 />

SocialWithFormLoginComponent.razor in SharedLibrary project

<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 in Client project

<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!");
    }
}

Final comments

As you can see the code is very simple for my troubleshooting, however the project is not, so re-creating would be a lot of work.

Any suggestions I might try? I'm really confused here.

Thanks in advance!

Update with solution:

Turns out, as @dani hererra posted, I was missing "_Imports.razor" in the folder on my components from the attached Razor Class library like so:

enter image description here

1

1 Answers

1
votes

Check Microsoft.AspNetCore.Components.Web is listed on _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