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"));
}
}
}
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)
@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"));
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"));
}
}
}
@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"));
}
}
}
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:
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.