Razor component tag helper not actually loading the razor component

Question

I've been following the steps in this guide to set up Blazor components in my Razor app. I completed all the steps from the "Prepare the app" section of that guide, modifying the _Layout.cshtml & Startup.cs files and adding the _Imports.razor file. To test this, I'm just trying to implement a basic counter component.

I added the below code to MyApp/Components/Counter.razor:

<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int InitialValue { get; set; }

    private void IncrementCount() => currentCount++;

    protected override void OnParametersSet()
    {
        currentCount = InitialValue;
    }
}

Then in MyApp/Pages/Counter.cshtml i have this:

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web
@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.JSInterop
@using MyApp
@using MyApp.Components

//This does not work--it appears exactly like this in the HTML when the page loads
<component type="typeof(Counter)" render-mode="ServerPrerendered" />

//this works as expected and loads the razor component
@(await Html.RenderComponentAsync<Counter>(RenderMode.ServerPrerendered))

Note that I copied all the using directives from the _Imports.razor file to see if that fixed things, but it didn't make a difference. My understanding is that the RenderComponentAsync function is outdated and the the "component" tag helper is the current way to use razor components. I'd also prefer to use that syntax since it's easier to pass parameters. Does anyone know what I'm missing to get it to work?

muck muck · Accepted Answer · 2020-07-22T20:46:52

Welp, after messing around with this for hours I realized that my app was on Net Core 3.0 and the tag helper is only available in 3.1+. Updating MyApp.csproj to have 3.1 instead fixed it:

<TargetFramework>netcoreapp3.1</TargetFramework>

Razor component tag helper not actually loading the razor component

1 Answers