Problems referencing static JavaScript files in wwwroot - .Net Core 2.2 Signalr

Question

I'm having difficulty referencing the relevant js files for signalr from the wwwroot folder.

The paths I need to reference are:

• wwwroot/lib/@aspnet/signalr/dist/browser/signalr.js
• wwwroot/js/chat.js

Here is my view:

@page
<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            User..........<input type="text" id="userInput" />
            <br />
            Message...<input type="text" id="messageInput" />
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>

<script src="~/wwwroot/lib/@@AspNetCore/signalr/dist/browser/signalr.js"></script>
<script src="~/wwwroot/js/chat.js"></script>

I am getting 404's in the browser:

http://localhost:5005/wwwroot/lib/@AspNetCore/signalr/dist/browser/signalr.js 404 (Not Found)

http://localhost:5005/wwwroot/js/chat.js net::ERR_ABORTED 404 (Not Found)

Update

After changing my script paths I am faced with these errors in the browser:

http://localhost:5005/lib/@AspNetCore/signalr/dist/browser/signalr.js net::ERR_ABORTED 404 (Not Found)

Uncaught ReferenceError: signalR is not defined at chat.js:3

chat.js Line 3:

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

This has red squiggly lines under it.

Answer 1

I would recommend you change a folder name and replace a url like this

<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Check this link too

Note: make sure your code is place at bottom of the page

Answer 2

<script src="~/wwwroot/lib/@@AspNetCore/signalr/dist/browser/signalr.js"></script>
<script src="~/wwwroot/js/chat.js"></script>

Replace with this

@section Scripts {
    <script src="~/lib/@@AspNetCore/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
}

Answer 3

1st, you should make sure your app (kestrel server) support static file ( app.UseStaticFiles() in Configurate method in startup.cs ) , and make sure the Microsoft.AspNetCore.Hosting.IHostingEnvironment.WebRoot is to a folder in your disk（normally it point to $"{Dictory.GetCurrentDirectory()}/wwwroot/" ）.

2st, make sure your signalr.js is in WebRoot folder (so it can be serve), and note the wwwroot folder is your root path eg ~/ , which mean your your js file is in wwwroot/lib/signalr/signalr.js the correct path for razor's script Tag Helper is <script src="~/lib/signalr/signalr.js"></script> .