Visual Studio Community 2019 16.5.3 with Blazor App -> Add -> New Item -> Razor Component -> Route or component is not rendered

Question

I have a very weird problem.

I'm following the official Blazor tutorial from Microsoft:

Add a new Todo Razor component to the app in the Pages folder. In Visual Studio, right-click the Pages folder and select Add > New Item > Razor Component. Name the component's file Todo.razor. In other development environments, add a blank file to the Pages folder named Todo.razor.

https://docs.microsoft.com/en-us/aspnet/core/tutorials/build-your-first-blazor-app?view=aspnetcore-3.1#build-a-todo-list

Done like this:

This creates a file that looks like this:

<h3>Todo</h3>

@code {

}

Given that it has no routing I add @page "/todo" to the top, exactly like the example pages Counter.razor and FetchData.razor has.

I then start the application but I can't navigate to

I have tried renaming the route to different names, check the folder for any scrap files, created new files but there is nothing that I can find.

No matter what I do the not found is hit from App.razor .

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Now to the really weird part. If I copy the file Counter.razor and rename @page to whatever I want it will work.

I then suspected this had something to do with encoding or hidden chars etc. But If I copy the entire working file content and only change @page it will still not work if the file was created from the UI. What could be the cause of this?

I have not modified anything else, everything done is simply add a new Blazor App -> Blazor Server App with Individual User Accounts -> Connect to an existing user store in the cloud (Azure AD B2C).

I can not add it as a component either. Adding <Todo2 /> to Index.razor will show up but <Todo /> will be blank.

What could be the cause of this?

Answer 1

Turned out to be a .csproj issue. The following values were present:

<ItemGroup>
  <Watch Remove="Pages\Todo.razor" />
  <Watch Remove="Pages\Todo2.razor" />
</ItemGroup>

<ItemGroup>
  <None Include="Pages\Todo.razor" />
</ItemGroup>

After deleting every ItemGroup it started working again since the files are watched by default.