Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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 $"{svg}";
    }

How should I patch this function, so I can access files from this file?

  1. 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?

  1. 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!

G
Guest 2 years ago
Blazor
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

G
Guest 2 years ago

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

user
Lauris Stepanovs Author 2 years ago

Hi,

  1. 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" />
  2. 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, KTChartsWidget8 initializes 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 a console.log displaying 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
user
Lauris Stepanovs Author 2 years ago

Hi,

  1. 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.
  2. 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.
  3. 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
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(