function override error in .razor.cs, but not in .razor

Question

In the blazor project, I've created a public class BaseComponent : Microsoft.AspNetCore.Components.ComponentBase

And so I want some of my components that are a bit complex to inherit from this class.

Now, I've added an error page, and I see some inconsistency when overriding the function OnInitialized, but it seems this is not limited to only that function.

Here's the Error.razor file that compiles without errors:

@inherits BaseComponent
@code {

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }
}

And when I want to move all the code to Error.razor.cs file:

using WebApp.Shared;

namespace WebApp.Pages.Error
{
    public partial class Error : BaseComponent
    {
        protected override void OnInitialized() // error is here
        {
            base.OnInitialized();
        }
    }
}

I get an error saying: 'Error.OnInitialized()': no suitable method found to override.

I've tried making the Error.razor.cs partial class inherit from Microsoft.AspNetCore.Components.ComponentBase instead from my BaseComponent that also inherits this class and has an override of OnInitialized function itself, and it doesn't give any compile errors.

So my question is:
Why are there no compilation errors in the .razor file, but there are in .razor.cs file?

Answer 1

Here's an example base component and usage that you may wish to use as a template.

Note:

1. I've made the base component a class not a razor component. Any child will almost certainly overwrite the content.
2. I've set the base class as abstract so it can't be used directly.
3. I've set the Namespace in everything.

// Components/MyComponentBase.cs
namespace StackOverflowAnswers.Components
{
    public abstract class MyComponentBase : ComponentBase
    {
        [Parameter] [EditorRequired] public string Header { get; set; } = String.Empty;

        [Parameter] public RenderFragment? ChildContent { get; set; }   
    }
}

// Components/MyDiv.razor
@namespace StackOverflowAnswers.Components
@inherits MyComponentBase

<h3>@this.Header</h3>
<div class="m-2">
    @this.ChildContent
</div>

// Components/MyDiv.razor.cs
namespace StackOverflowAnswers.Components
{
    public partial class MyDiv : MyComponentBase 
    {
        protected override void OnInitialized()
        {
            base.OnInitialized();
        }
    }
}

And usage in Index.razor

@page "/"
@page "/Index"
@using StackOverflowAnswers

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
<StackOverflowAnswers.Components.MyDiv Header = "Hello Blazor">
    My Div Content
</StackOverflowAnswers.Components.MyDiv>