Using Syncfusion with Bolero

[Javier Solorzano]

Has anyone tried to use Synfucion Blazor and Bolero? (That is F# framework for Blazor)

I'm experimenting with Blazor so I compiled an empty project added Syncfusion but it fails at runtime, after briefly displaying an SfCalendar component, the page goes blank and I get the following error in the browser console:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot provide a value for property 'SyncfusionService' on type 'Syncfusion.Blazor.Calendars.SfCalendar`1[[System.DateTime, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'. There is no registered service of type 'Syncfusion.Blazor.SyncfusionBlazorService'.
System.InvalidOperationException: Cannot provide a value for property 'SyncfusionService' on type 'Syncfusion.Blazor.Calendars.SfCalendar`1[[System.DateTime, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'. There is no registered service of type 'Syncfusion.Blazor.SyncfusionBlazorService'.
  at Microsoft.AspNetCore.Components.ComponentFactory+<>c__DisplayClass5_0.g__Initialize|2 (System.IServiceProvider serviceProvider, Microsoft.AspNetCore.Components.IComponent component) <0x39da728 + 0x000e0> in :0
  at Microsoft.AspNetCore.Components.ComponentFactory.PerformPropertyInjection (System.IServiceProvider serviceProvider, Microsoft.AspNetCore.Components.IComponent instance) <0x399d4c8 + 0x00066> in :0
  at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent (System.IServiceProvider serviceProvider, System.Type componentType) <0x3996448 + 0x0004c> in :0
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateComponent (System.Type componentType) <0x39954f8 + 0x00014> in :0
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame (Microsoft.AspNetCore.Components.RenderTree.RenderTreeFrame& frame, System.Int32 parentComponentId) <0x3d165e8 + 0x0005c> in :0
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 frameIndex) <0x3d16478 + 0x0004c> in :0
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 frameIndex) <0x3d161f8 + 0x0007a> in :0
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 newFrameIndex) <0x3d15ef0 + 0x000b4> in :0
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext& diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) <0x3d067e0 + 0x0048c> in :0
  at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff (Microsoft.AspNetCore.Components.RenderTree.Renderer renderer, Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, System.Int32 componentId, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] oldTree, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] newTree) <0x3d05888 + 0x0008c> in :0
  at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) <0x3cf2a08 + 0x00100> in :0
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) <0x3cf2558 + 0x0004c> in :0
  at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x3cf1c98 + 0x00092> in :0 blazor.webassembly.js:1:37761

And this in my IDE console

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot provide a value for property 'SyncfusionService' on type 'Syncfusion.Blazor.Calendars.SfCalendar`1[[System.DateTime, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'. There is no registered service of type 'Syncfusion.Blazor.SyncfusionBlazorService'.

System.InvalidOperationException: Cannot provide a value for property 'SyncfusionService' on type 'Syncfusion.Blazor.Calendars.SfCalendar`1[[System.DateTime, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'. There is no registered service of type 'Syncfusion.Blazor.SyncfusionBlazorService'.

[Orange]

Managed to get it working here on a webassembly app, and don't get the error you are seeing.

Am running Syncfusion 18.2.0.44.

I just created a new project from the Bolero VS template.

Added the respective elements per the docs

Added a page endpoint 

type Page =

    | [<EndPoint "/">] Home

    | [<EndPoint "/counter">] Counter

    | [<EndPoint "/data">] Data

    | [<EndPoint "/test">] Test

A menu item (if desired)

menuItem model Test "Test Page"

The Main body dispatch 

| Test -> testPage model dispatch

And finally the page

let testPage model dispatch =

    comp<Syncfusion.Blazor.Calendars.SfCalendar<DateTime>> [] []

Does that help ?

[Sureshkumar P]

Hi Javier, 

 

Please use the above Orange’s update to resolve the issue. If still you have face the issue then please update the sample with replication procedure to proceed further. 

 

Regards, 

Sureshkumar P 

[Sureshkumar P]

Hi Orange, 

 

Thanks for your suggestion. 

 

Please get back to us if you need any further assistance on this.

 

Regards, 

Sureshkumar P 

[Javier Solorzano]

That is exactly what I did but instead, I get exceptions. (Attached the output screen)

Attachment: Capture_647d3bea.zip

[Sureshkumar P]

Hi Javier, 

Thanks for your patience. 

 

Based on your shared issue details, we suspect that you have missed to register the Syncfusion Blazor Service. 

 

Kindly refer the below code example. 

[startup.fs] 

 

namespace MyApp.Client 

 

open Microsoft.AspNetCore.Components.WebAssembly.Hosting 

open Bolero.Remoting.Client 

open Syncfusion.Blazor 

 

module Program = 

 

    [<EntryPoint>] 

    let Main args = 

        let builder = WebAssemblyHostBuilder.CreateDefault(args) 

        builder.RootComponents.Add<Main.MyApp>("#main") 

        builder.Services.AddRemoting(builder.HostEnvironment) |> ignore 

        builder.Services.AddSyncfusionBlazor() |> ignore 

        builder.Build().RunAsync() |> ignore 

        0 

 

 

 

 

We have prepared the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/boleroCalendar-323083075  

 

Regards, 

Sureshkumar P