javascript - Why can't I load any js after my blazor.server.js?

Question

So I noticed that in my _Host.cshtml file I have this script before the </body> tag

 <script src="_framework/blazor.server.js"></script>

And I also have some scripts that are suppose to load after that which are these

    <script src="assets/plugins/jquery/jquery.min.js"></script>
    <script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
    <script src="assets/plugins/popper/popper.js"></script>
    <script src="assets/plugins/feather/feather.min.js"></script>

    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/plugins/typeahead/typeahead.js"></script>
    <script src="assets/plugins/typeahead/typeahead-active.js"></script>
    <script src="assets/plugins/pace/pace.min.js"></script>
    <script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="assets/plugins/highlight/highlight.min.js"></script>

    <!-- Articles Script -->
    <script src="assets/plugins/dataTable/datatables.min.js"></script>
        <script src="assets/plugins/summernote/summernote.min.js"></script>
        <script src="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
    <!-- Required Script -->
    <script src="assets/js/app.js"></script>
    <script src="assets/js/avesta.js"></script>
    <script src="assets/js/avesta-customizer.js"></script>

</body>

However, if I have the blazor.js script at the top, my menu won't act normal, it will stop working and look like this. I'm actually clicking a lot and it's not animating as you can see.

However if I put the blazor.server.js script at the bottom to load last, it works just fine and looks like this

But then if I load it last, I get this in my console

which results in my not being able to do this

<input @bind="@CurrentValue" @oninput="@((e) => { CurrentValue=(string)e.Value;})" @onkeypress="KeyPress" class="form-control" type="text" placeholder="Search" aria-label="Search">

It just doesn't hit the function at all, nothing happens, it doesnt register it.

Answer 1

Using the Net5, You can now reference your scripts on the main layout by overriding the OnAfterRenderAsync. Here is an example

You will first inherit IJSRuntime

@inject IJSRuntime JSRuntime 

Then here is the Code:

@code {        
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/assets/plugins/jquery/jquery.min.js");
        }
    }
}