Why would components in this Blazor app fail to render? - asp.net-core

Question

I'm writing a Blazor app and obviously I want to get some components rendered in there. I've just tried adding a basic navigation element to my main layout but it's not rendering. I can see the element on the DOM, but that element is empty.
I went with some fairly simple content to start with in my NavMenu component that I'm trying to include on MainLayout.cshtml:
<h1>WHYYYY????</h1>
I've also taken a pretty simple layout on my MainLayout.cshtml page:
#inherits BlazorLayoutComponent
<NavMenu />
<div class="body-content">
#Body
</div>
The file structure in my project seems uncomplicated:
So I'm at a loss here as to what I've overlooked. It looks like Blazor knows there's something it should be rendering to the page - that's why I can see the NavMenu element in the DOM. But there's never any content rendered inside that element. What's missing?
I'm running the latest (at time of writing) version of Blazor: 0.5.1.

Answer 1

You are probably running into a bug with the .csproj file. It should look like this:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<RunCommand>dotnet</RunCommand>
<RunArguments>blazor serve</RunArguments>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.5.1" />
<PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.5.1" />
<DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.5.1" />
</ItemGroup>
Yours has most likely extra stuff in it, that prevents the component from compiling. This typically happens when adding files or copying them. See: https://github.com/aspnet/Blazor/issues/1206

Answer 2

It turns out the root cause was related to namespaces and casing.
When I originally set up the project, I created it using the command line in VS Code. Out of habit, I wrote everything in lowercase (i.e. dotnet new blazor -o myapp).
As a personal preference, I like my namespaces to be title cased, so some time later I decided to "tidy up" and change myapp to Myapp. I went through the code to refactor to the new titlecase name and everything compiled, so I carried on working... until a few weeks later when I went back to do some work on a component and noticed it wasn't behaving.
It turns out that razor pages are automatically namespaced based on folders and a subset of those are included in the _ViewImports.cshtml page. That file still referenced the lower case namespace and pages looking for a lowercase project root were no longer able to find the right shared components.
So unsurprisingly, it's an entirely self-inflicted issue and yes I feel very silly for not thinking it through properly from the start.