Blazor WASM errors
Hello.
I managed to create Blazor WASM application with Metronic theme and kit. I have now few errors:
1. System.IO.DirectoryNotFoundException
Unhandled exception rendering component: Could not find a part of the path '/wwwroot/assets/media/icons/duotune/arrows/arr061.svg'.
I assume this has something to do with how Blazor WASM access to data/files. After some debugging I found out problem is this function in KTTheme.cs file
public string GetSvgIcon(string path, string classNames)
{
var svg = System.IO.File.ReadAllText($"./wwwroot/assets/media/icons/{path}");
return $"<span class=\"{classNames}\">{svg}</span>";
}How should I patch this function, so I can access files from this file?
2. I also get this rendering error
Unhandled exception rendering component: Could not find 'KTChartsWidget8.init' ('KTChartsWidget8' was undefined).
I found in other question, that I need to change OnAfterRenderAsync function.
I changed it and it now looks like this
protected override async Task OnAfterRenderAsync(bool firstRender)
{
//if(firstRender){
//await JS.InvokeVoidAsync("KTChartsWidget8.init");
//}
JS.InvokeVoidAsync("KTChartsWidget8.init");
}I don't get error anymore, but chart is still not rendering. Am I missing something?
3. Navigation links
I think navigation default navigation links are wrong. Now they looks like this
href="?page=dashboards/ecommerce", shouldn't they point to /dashboards/eccomerce ?Thanks for answer!
Replies (3)
Hi,
- Are you following the same file structure as the default Metronic Blazor Starterkit?
Make sure that file /wwwroot/assets/media/icons/duotune/arrows/arr061.svg exists. - If you don't have any errors, most likely component's initialization function was successfully triggered. If you're rendering your widget asynchronously, remember to call the initialization function after the component has been rendered.
- Keep in mind that these links are included for demonstration purposes. In your application, you should link to the actual page routes.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris, thanks for answers.
1. Yes, I am following file structure. Also file with your path exists (I copied all from Blazor Server example). I think it has something to do with getting the file (Blazor WASM must use httpClient to get assest/files...
2. I don't really understand your answer. Can you give me example? I am calling OnAfterRenderAsync but it still does not show up.
3. Oh okay.
BR
Hi,
- It seems like this approach will not work in your Blazor Webassembly project. You can consider adopting an alternate approach to handle icons.
Begin by registering a new Razor component called SvgIcon.razor. Insert the content from this gist file into the component.
Then replace all GetSvgIcon usages with this component as shown below:<SvgIcon IconPath="assets/media/icons/duotune/arrows/arr061.svg" /> - If the function was triggered then most likely problem isn't with the function trigger code itself.
I would suggest you to verify the following:
In the initialization function, we are using IDs to find the widget elements. Make sure that the IDs in the initialization function match with IDs on your widget element.
Make sure that you are using the right widget js instance, each widget has its own JavaScript instance, which you can use to initialize the specific widget. For instance,KTChartsWidget8initializes chart widget-8, for other widgets use different instances.
If you are using everything correctly and the widget still isn't initialized then try to do debugging, put aconsole.logdisplaying element variable of Starterkit/_keenthemes/src/js/widgets/charts/widget-8.js, then check result in your browser's console.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
