Unable to get Blazor working with Metronic
Hey
Like many others I'm also struggling to get a Blazor Server example of Metronic up and running.
I have got to the stage where JS is working on initial page load, but anytime I navigate to a new page the JS stops working as per the widgets not loading.
I'm not able to get all of the functionality without loading all of my required scripts within MainLayout.razor, whereas the docs specify just to load plugins.bundle.js and scripts.bundle.js
MainLayout.razor
@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/widgets.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/widgets.js"));
}
}
}I have not specified any other JS elsewhere in the code. Perhaps you can share working example of Blazor as I'm sure this would help many others. Alternatively I can upload my code on GitHub for you to review
Replies (7)
When loading the JS files seperately within Index.razor for example, and leaving main js files within MainLayout.razor I receive the following:
blazor.server.js:1 [2022-04-19T19:15:17.842Z] Error: Microsoft.JSInterop.JSException: KTUtil is not defined
ReferenceError: KTUtil is not defined
at Object.../demo1/src/js/widgets/cards/widget-1.js (http://localhost:5133/assets/js/widgets.bundle.js:174:1)
at __webpack_require__ (http://localhost:5133/assets/js/widgets.bundle.js:14109:41)
at http://localhost:5133/assets/js/widgets.bundle.js:14120:11
at http://localhost:5133/assets/js/widgets.bundle.js:14171:12
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at BookingApp.Pages.Index.OnAfterRenderAsync(Boolean firstRender) in C:\Users\luke-\source\repos\BookingApp - Copy\BookingApp\Pages\Index.razor:line 2804
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)Code within Index.razor:
@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/widgets.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/widgets.js"));
}
}
}
The required files are
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js");
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));Please import only these files in MainLayout.razor.
Hey Lauris,
I have done this, however as per your comment previously, "other files must be initialized and loaded separately."
I have tried doing so as I mentioned above, but I receive KTUtil not defined error. Perhaps I'm using the wrong lifecycle method?
Hi Luke,
Could you please show how you are initializing other files?
Sure!
MainLayout.razor
@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));
}
}
}Index.razor
@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/widgets.bundle.js"));
await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("assets/js/custom/widgets.js"));
}
}
}And then the error when intialising in this way (Note that the nav menu is still working so MainLayout.razor JS is fine):
blazor.server.js:1 [2022-04-19T19:15:17.842Z] Error: Microsoft.JSInterop.JSException: KTUtil is not defined
ReferenceError: KTUtil is not defined
at Object.../demo1/src/js/widgets/cards/widget-1.js (http://localhost:5133/assets/js/widgets.bundle.js:174:1)
at __webpack_require__ (http://localhost:5133/assets/js/widgets.bundle.js:14109:41)
at http://localhost:5133/assets/js/widgets.bundle.js:14120:11
at http://localhost:5133/assets/js/widgets.bundle.js:14171:12
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at BookingApp.Pages.Index.OnAfterRenderAsync(Boolean firstRender) in C:\Users\luke-\source\repos\BookingApp - Copy\BookingApp\Pages\Index.razor:line 2804
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)Hi,
Right now we are initializing almost all js files inside the onDOMContentLoaded event, but in Blazor you can trigger the initialization event manually.
For example:
- In file src/js/custom/widgets.js you can remove the initialization from onDOMContentLoaded event.
- Add a global KTWidgets instance.
- Trigger the KTWidgets init function from your C#.
window.KTWidgets = require("@/src/js/custom/widgets.js");await JS.InvokeVoidAsync("KTWidgets.init");Hi Luke,
Please do not load all bundled files inside MainLayout.razor, you have to load only two main js files, other files must be initialized and loaded separately.
Check example in our Blazor integration doc.
