Skip to content

Latest commit

 

History

History
101 lines (72 loc) · 2.5 KB

root-component-null-reference.md

File metadata and controls

101 lines (72 loc) · 2.5 KB
title description type page_title slug position tags ticketid res_type
Null Reference exception related to TelerikRootComponent or TelerikRootComponentFragment
How to fix the Null Reference exception related to TelerikRootComponent or TelerikRootComponentFragment
troubleshooting
Null Reference related to TelerikRootComponent
kb-telerik-root-component-null-reference
1475025
kb

Environment

Product UI for Blazor

Description

When running a Telerik Blazor application I receive an error similar to the following:

System.NullReferenceException
   at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragment.Dispose()
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.Dispose()

NullReferenceException: Object reference not set to an instance of an object.
    at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragmentBase.Dispose()

Object reference not set to an instance of an object.
    at Telerik.Blazor.Components.TelerikRootComponentFragmentBase.OnInitAsync()

Possible Cause

The origin of this behavior is a missing <TelerikRootComponent> from the MainLayout.razor file in the project.

You can reproduce this with the following snippet:

caption Missing TelerikRootComponent from the MainLayout file

@inherits LayoutComponentBase

    <div class="sidebar">
        <NavMenu />
       </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>

Solution

Wrap the entire content of the MainLayout.razor file inside the <TelerikRootComponent>. Read more on the assets and configuration steps you need in the What You Need article.

caption Wrapping the content of the MainLayout file inside the TelerikRootComponent

@inherits LayoutComponentBase

<TelerikRootComponent>

    <div class="sidebar">
        <NavMenu />
       </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>

</TelerikRootComponent>