We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Syncfusion components doesn't render in Blazor WebAssembly application

Platform: JavaScript - EJ 2 |
Control: General |
Published Date: September 27, 2019 |
Last Revised Date: October 1, 2019
Tags: common

Problem

When using Blazor WebAssembly application with Syncfusion Blazor components, the applications are not rendered in the web page.

Cause

The Blazor uses the System.Text.Json library for the serialization process to transfer data, whereas Syncfusion Blazor components use the Newtonsoft.json library for serializing data.

Solution

We need to add the Linker.xml file with the Newtonsoft.json library references in the application solution (.csproj) file to resolve this component rendering issue in Blazor WebAssembly application.

Linker.xml configuration removes the unwanted dependent libraries in the final build and renders the Syncfusion components in Blazor WebAssembly application properly.

Find the Linker.xml file from the following link:

Linker.xml: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Linker1638770663.zip

  • The following code sample demonstrates the Linker.xml file and its configuration in the csproj file.
    <?xml version="1.0" encoding="UTF-8" ?>
    <!--
      This file specifies the parts of the BCL or Blazor packages that must not be stripped by the IL Linker even if they aren't referenced by user code.
    -->
    <linker>
    <assembly fullname="mscorlib">
    <!--
          Preserve the methods in WasmRuntime, because its methods are called by JavaScript client-side code to implement timers.
    Fixes: https://github.com/aspnet/Blazor/issues/239
    -->
    <type fullname="System.Threading.WasmRuntime" />
    </assembly>
    <assembly fullname="System">
    <type fullname="System.ComponentModel*"/>
    </assembly>
    <assembly fullname="System.Core">
    <!--
    System.Linq.Expressions* is required by Json.NET and any 
    expression.Compile caller. The assembly isn't stripped.
    -->
    <type fullname="System.Linq.Expressions*"/>
    </assembly>
    <!--
        The app's entry point assembly is listed. The assembly isn't stripped by the IL Linker.
    -->
    <assembly fullname="BlazorApp" />
    </linker>
    

 

  • Mention the name of the BlazorApp.csproj file name (BlazorApp) as the final assembly in the Linker.xml file.

 

  • Add the following Linker.xml file reference in the solution (.csproj) file of your application.
    <ItemGroup>
    <BlazorLinkerDescriptor Include="Linker.xml" />
    </ItemGroup>
    

 

Reference Link: https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/configure-linker?view=aspnetcore-3.0#control-linking-with-a-configuration-file

Warning

Disabling BlazorLinkOnBuild in the project file does not affect the rendering of components, but most of the unwanted dependent libraries will be included by the linker. In order to avoid this, the above approach is suggested.

Note

We have planned to migrate the Newtonsoft.json functionalities to System.Text.Json. After migrating the process, the above configuration will no longer be needed to configure in the application end. Refer to the following feedback link for more details.

https://www.syncfusion.com/feedback/6577/using-system-text-json-instead-newtonsoft-json

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon