24

Possibly a stupid question. I installed Chart.js using package manager. It's in Solution explorer.

enter image description here

But where are the actual JS files or how do I get them? When I installed it, there are no changes that Git detects, so I'm not sure if anything at all happened.

user7127000
  • 3,143
  • 6
  • 24
  • 41
  • 1
    `there are no changes that Git detects` Probably ignored by `.gitignore`. I'm not sure what package manager you are using, but usually it will configure it such that dependencies will not be in your commits. – Derek 朕會功夫 Apr 19 '17 at 03:20
  • Not a stupid question at all. I added **jqwidgets**, which only comes as a NuGet package, and the vendor seems unaware that that's a problem. – Auspex Jun 23 '17 at 09:36

2 Answers2

15

Chart.js 2.5.0 includes a Content\Scripts directory inside its NuGet package which contains a Chart.js and Chart.min.js. Depending on what sort of project you are using these files may or may not be added directly into your project.

If you are using a .NET Framework project that has a packages.config file then the JavaScript files will be added into a Scripts folder into your project.

If you are using a project.json file, or your project uses PackageReferences, then nothing will be added since this sort of project only supports files that are in a contentFiles directory inside the NuGet package. Your project looks like a .NET Core project which will use PackageReferences. The Chart.js NuGet package itself will be in the %UserProfile%\.nuget\packages directory if you need to get the javascript files.

Tseng's answer that recommends switching to using Bower or the Node Package Manager to add the JavaScript files seems like the best solution here instead of using NuGet, which does not have good support for adding source files to your project for newer project file formats.

Matt Ward
  • 47,057
  • 5
  • 93
  • 94
  • 1
    You're right, it's in `%UserProfile%\.nuget\packages`. So how am I supposed to reference it in my code? – user7127000 Apr 19 '17 at 14:13
  • 2
    You are probably going to have to copy the files and add them directly into your project and not use NuGet. – Matt Ward Apr 19 '17 at 14:39
  • I disagree with this answer. Using NuGet for non-assemblies is discouraged these days. For JavaScript/css you should use the javascript/node package manager instead: npm or bower instead of nuget and manually copying stuff over – Tseng Apr 20 '17 at 07:29
  • @Tseng - Your solution is better. I guess the real solution here is just to not use NuGet for JavaScript files, especially if you are using a newer project format which does not support the older NuGet packages that use a Content directory. The project in the screenshot uses Bower so presumably adding Chart.js there would be the correct solution. The answer here only really covers why the Chart.js NuGet package is not working. – Matt Ward Apr 20 '17 at 13:07
  • Using npm and Bower are fine, _if available_, but not everybody has ported their stuff. So, while I heartily recommend **not** using NuGet, this is still the correct answer. – Auspex Jun 23 '17 at 09:33
  • I prefer bower, seems to be working well again with Visual Studio 2017. I had to add my own bower.json file, that was available via the "add new file" options for the project. – Eric Milliot-Martinez Mar 16 '18 at 14:57
10

The usage of NuGet for css/javascript libraries is discouraged. For ASP.NET Core you should use the java script / node package managers, bower and npm respectively.

You can use either one. Bower is more focused on browser libraries and css, while NPM is more for server-sided stuff (using node.js). But node.js also contains most (if not all) of the packages bower has, so it's matter of preference.# For that, you need to select your MVC project and add a new file to the project root. While in the template manager (Add->New File...), search for "Bower Configuration File" or "npm Configuration file".

Then edit the file and add your dependency, i.e.

package.json (npm)

{
    "dependencies:" {
        "chart.js": "2.5.0"
    }
}

Once you save, the file will be downloaded in a directory named "node_modules`. This alone won't be enough, as the required files need to be copied over to wwwroot folder, where they can be accessed when the application runs.

For this you'd need either use the bundler to bundle the files together (should be in default ASP.NET Core project template) or use task runners such as Gulp or Grunt to run tasks on build/publishing, which does that for you. See ASP.NET Core Docs on Gulp examples.

Update

Bower been deprecated now for over a year.

Community
  • 1
  • 1
Tseng
  • 61,549
  • 15
  • 193
  • 205
  • 3
    "The usage of NuGet for css/javascript libraries is discouraged." - Would you by any chance have a source for this statement? Just trying to understand in more detail. I could think of some scenarios where distributing the client and server pieces together would make sense and possibly outweigh the benefits of having bower/npm manage client-side dependencies. On https://learn.microsoft.com/en-us/aspnet/core/client-side, Bower is "recommended" over npm or NuGet in a few places. However, I can't find a discussion of the respective trade-offs – Max Oct 29 '17 at 12:59
  • 1
    @Max: Don't have a source at hand right now, but in the past the JavaScript/css files etc. would be unpacked when issuing a `Install-Package`. In the ASP.NET Core workflow, this doesn't happen anymore (at least was the case during the time of 1.0/1.1 releases). Also NuGet doesn't run any power shell scripts inside, which happened with some nuget packages before. One reason may be that power shell isn't available on Linux and MacOS (yet). Every package would have it's own folder structure where to unfold these files, which often end up being commited. – Tseng Oct 29 '17 at 13:31
  • 1
    node_modules/bower_modules are excluded by default .github that's created by the templates these days and generally the flows are different (i.e. by copying over the files into `wwwroot/lib`, using "bundler" (non angular templates) or in the newer ASP.NET Core templates to use webpack to package everything for dev/release. Last but not least, the nuget packages are often updated slowly, considering that the todays usage of css/js libraries shifted to npm/bower. At least that's valid for ASP.NET **Core** development. – Tseng Oct 29 '17 at 13:31
  • 5
    @Max That must no longer be the case. `While Bower is maintained, its maintainers recommend using a different solution. Library Manager (LibMan for short) is Visual Studio's new client-side static content management system (Visual Studio 15.8 or later). For more information, see Library Manager: Client-side content manager for web apps. Bower is supported in Visual Studio through version 15.5.` https://learn.microsoft.com/en-us/aspnet/core/client-side/bower?view=aspnetcore-2.1 – Kelly Elton Jun 27 '18 at 16:38