We Keep Coding

Blazor: how to include javascript-package, which is installed with Nuget-Package-Manager?

I'm afraid this will be a stupid question. But I don't manage it to use my JS-Package (for example jQuery), which i have installed with Visual Studio Nuget-Package-Manage in my .net 5 Blazor Server-App.
What i did:
Installing the Package. Here I installed jquery.datatable which includes jQuery itself:
Image of my Project
But now, i don't know how to include it for example in my "_Host.cshmtl"-File:
<script type="text/javascript" charset="utf-8" src="???WHERE IS IT????"></script>
Where is my *.js-File? For example: query.dataTables.js ??
I found it on "C:\Users\xxxxx.nuget\packages\jquery.datatables\1.10.15" and
"C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"
Do i realy have to copy it to my wwwroot-Folder manualy?
If so, why i should use the package-manager?
Thanks for your help!!

Traditional web applications using JavaScript normally load the file from a local folder or from a web CDN (e.g. CDNJS.com etc). This is then loaded from the page (often referenced from a layout file).
Early on it used to be the case that JS libraries could be loaded via NUGET packages but this approach is now discouraged. It had to fix the creation of the script in a set location, e.g. /Scripts and there was no flexibility. Almost all client-side libraries are now in NPM as packages or on CDNs like cdnjs.com.
The current approach for .NET web apps to load client-side assets is either use LibMan or NPM and have some sort of webpack arrangement to compile/pack/copy. You would never load the JS from a /packages folder in the way you suggested.
Blazor Approach
Blazor (since .NET 5.0) can load either embedded JS modules (from your code), or from a URL directly.
If you want to package some JS with your application you should look at Razor Component libraries. This allows static assets such as JS files to be embedded in the code, which Blazor makes available via the _content route, e.g.
_content/LibraryName/myfile.js.
Because Blazor is a SPA you don't include JavaScript using a <script> tag in your HTML, you should load it as a module and reference it there.
This documentation explains it:
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor-javascript-isolation-and-object-references
DataTables, JQuery
So should you include jquery.min.js and jquery.datatables.min.js in your library? I'd suggest a better approach is to load from a CDN - your package is smaller and there is a chance the URL is already cached and loaded, e.g.
var module = await js.InvokeAsync<IJSObjectReference>(
"import", "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js");
This loads the module on-demand from the URL directly. You'd also need to load jquery before this.
Finally I'd make this observation: are you sure you want to go down this route?
There are several native Blazor libraries on NUGET for rendering and handling tables. You'll find it much easier to go this way rather than try to patch jquery-based libraries into a Blazor app.

I had a similar issue. Not with the same libraries, but I was wanting to do something that wasn't available in a Blazor library yet. I needed a video player that could handle a certain format that the default HTML 5 video element can't handle. There is an open source player, videoJS , that did the job, but it's a javascript library. It's available on npm and there are cdn's - however the plugins (as far as I could tell) weren't on CDN - so I had to go down the npm route.
When you install an npm package it puts it into a hidden node_modules folder. Unfortunately even if you point to that path or even copy the file in with your other js files it won't work. Npm packages are designed to be run by nodejs, rather than directly in the browser. In order for them to run in a Blazor app (in the browser) you have to do an intermediary step of transpiling it into a browser friendly format.
What I really wanted was a re-usable component, that wrapped the javascript.
It took me a while to get there but I finally figured it out. I've written a series of articles on my blog detailing it. The final one ports everything into a Razor Class library that can be consumed with no knowledge of the underlying js. The fourth article deals with importing npm libraries and using them within a web assembly app. I'll put the link below but essentially the process is:
Create a folder eg JS and initialise it for npm (npm init -y)
Install the required npm packages (npm install --save)
Create a src folder within the JS folder that that you will put your own js files in
Create an index.js file in src that imports the required javascript modules and exports what you want to consume
Install snowpack (npm install snowpack --save-dev) (or webpack but I found snowpack seems to work better)
Configure snowpack to process the contents of the src folder into wwwroot/js (without snowpack or similar the files in the npm package won't be in a browser or blazor useable format)
use javascript isolation to pick up your index.js file from wwwroot/js
See blog post here for full details (It's part 4 of a 5 part series - part five puts it all in a razor class library so you can add it to a project without ever seeing the javascript)
I know this is late but this SO question was one I kept coming across when searching on how to do what I wanted, so thought I'd put my solution here in case it helps anyone else searching for what I did.

TypeScript Library import another library

I'm developing a library in TypeScript.
This library uses the https://github.com/Simonwep/pickr library.
I would like to make my library available so users can use it, but question is: do I need to bundle pickr library or just put a reference in the package.json?
I tried to use the library in a sample project and in dev mode all works since it loads from node_modules, but when I build the project and try to load it fails to load it.
It works only by importing the library using
<script src="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/pickr.min.js"></script>
If library will be used in a web browser I made it so the script tag is automatically added.
But what if someone will use the library in an ionic project for instance which will run on a tablet?
In this case Pickr library needs to bundled in the final build.
Is this an automatic process? What's the correct way of using a third-party library in this case?

If you want pickr to get bundled with your code you will have to
List it under dependencies
Import it in your code (see pickr docs)
If its not imported in your code it wont be bundled.
If you want to tell the user to manually add pickr when he uses your module you can list pickr as a peerDependency in your package.json

How to add third party libraries in Angular 4 using Webpack?

I've recently tried adding js libraries (such as chartist or datatables) to my Angular 4 project using Webpack but I'm stuck. I successfully added to my project js libraries from the npm library, they were listed in the node_modules folder and in the package.json file.
The problem seems to be that typescript libraries are allowed but not js libraries. I tried importing a js library first in app.module.ts then in NgModules, then in the right component, it didn't work. I then tried importing it in the script table in the angular-cli.json file, it didn't work either.
Could you please tell me how you would proceed injecting a third party library in an Angular 4 component for example?

As previously stated this question is too broad. Generally if it is a non angular specific js library then you will be importing it via angular.json file. How that library is triggered off is completely down to how that library operates.

How do I reference a js file from a node module in HTML?

I've used JetBrains WebStorm to create a Node.js Express App. I used npm (via File->Settings->Node.js and NPM) to install a package called validator which is used for string validation.
The package was installed under node_modules, which is fine. If I do var validator = require('validator'); in my server code, I can use the validation functions successfully.
The problem is that I would also like to use validator in client JavaScript. I can include the script like this:
<script src="/javascripts/xss-filters.min.js"></script>
But that means I have to copy xss-filters.min.js from the node_modules folder into the public javascripts folder. Then, if I ever update the package with npm, the files will be out of sync.
Is there some way to reference node_modules from my view, or to create some sort of linked file or file reference or something? I'd rather not have to maintain this manually.

you should consider using browserify, which allows you to require modules in the browser by building all the dependencies. so basically you code like you would do in server side http://browserify.org

You can done it by using another node.js module, called node-browserify
how to use node.js module system on the clientside
You can try to use bower, or yeoman.
bower - will simplify the process to include js libs.
yeoman - will help you to build projects with the the libraries that you need.

Using the dart:js library without a html file

Is it possible to use the dart:js library without having a html file to load the js files but some alternative way of loading the javascripts in the context?
I need this for a command-line app, so having a html file makes no sense

When you run a command line app in the DartVM there is no Javascript VM, so you cannot use Javascript libraries.
However depending on your use case, you could run your javascript code with node.js, and communicate with the DartVM using sockets.
Perhaps add some more details about your specific use case.
Update:
To run lessc from Dart, first install node.js.
Then Install lessc:
npm install -g less
lessc styles.less styles.css
You can then call lessc from Dart using dart:io Process.run().