Syncfusion components doesn't render in Blazor WebAssembly application

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