How to build a Nuget package with both an assembly and a JavaScript file?

Question

I am trying to create a NuGet package that includes one assembly and one JavaScript file that I can use in a Blazor app. I am targeting .Net 6.0 since it is LTS and I will want to publish the final NuGet package for public use if I can get it to work.
My desired outcome is to end up with the TestClassLibrary.dll in the target projects lib folder and the TestJSUtility.js file in the wwwroot/js folder in the target application. I have consulted the MS docs at https://learn.microsoft.com/en-us/nuget/reference/nuspec?source=recommendations#specifying-files-to-include-in-the-package and I think I have everything right. The command that I run to create the nupkg is as follows:

D:\src\Sandbox\TestNugetWithJS\TestClassLibrary>nuget pack TestClassLibrary.1.0.1.nuspec
Attempting to build package from 'TestClassLibrary.1.0.1.nuspec'.
Successfully created package 'D:\src\Sandbox\TestNugetWithJS\TestClassLibrary\TestClassLibrary.1.0.1.nupkg'.

Below is my TestClassLibrary.1.0.1.nuspec file

<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://schemas.microsoft.com/packaging/2012/06/nuspec.xsd">

<!-- https://learn.microsoft.com/en-us/nuget/reference/nuspec?source=recommendations#specifying-files-to-include-in-the-package -->
  <metadata>
    <id>TestClassLibrary</id>
    <version>1.0.1</version>
    <title>TestClassLibrary</title>
    <authors>TestClassLibrary</authors>
    <description>Just a test Library</description>
    <dependencies>
      <group targetFramework="net6.0">
        <dependency id="Microsoft.JSInterop" version="6.0.24" exclude="Build,Analyzers" />
      </group>
    </dependencies>
    <contentFiles>
     <files include="any/any/wwwroot/js/TestJSUtility.js" buildAction="None" copyToOutput="true" flatten="false" />
    </contentFiles>
  </metadata>
  <files>
    <file src="D:\src\Sandbox\TestNugetWithJS\TestClassLibrary\bin\Debug\net6.0\TestClassLibrary.dll" target="lib\net6.0\TestClassLibrary.dll" />
    <file src="D:\src\Sandbox\TestNugetWithJS\TestClassLibrary\wwwroot\js\TestJSUtility.js" target="wwwroot\js\TestJSUtility.js" />
  </files>
</package>

Following is the layout of my project that has the source for the package:

Following is a screen shot of the TestClassLibrary.1.0.1.nupkg after I changed it to a .zip showing that the files I wanted to include are indeed present

Following is a screen shot of the test project after I installed the NuGet package.

The problem is that when I include this NuGet package in a project, the java script file does not get included. My TestClassLibrary.dll just has dynamic loading of the js file and if I manually copy it over to the project, everything works. The code that my NuGet package runs to load the js file is as follows:

public async Task<int> AddTwoNumbers(int a, int b)
{
  await using (IJSObjectReference jsUtility = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/TestJSUtility.js"))
  {
     int result = await jsUtility.InvokeAsync<int>("simpleAdder", a, b);
     return result;
  }
}

This is actually a silly project to show the issue I am having which is in a much bigger more complex project, but if I can get this to work, the nuspec file should port over.

My question is: How do I build a NuGet package that actually installs not only the dll, but also the js file?

Answer 1

Use a _content path for RCL's:

"./_content/[YOUR RCL NAME SPACE]/js/TestJSUtility.js"

Example1.razor

"./_content/SomeRazorClassLibrary/scripts/some-script.js"

Example2.razor

"./_content/SomeRazorClassLibrary/Views/Example2.razor.js"