TypeScript MSBuild Target named GetTypeScriptOutputForPublishing should not include the removed Content files

[marqdouj]

🔎 Search Terms

GetTypeScriptOutputForPublishing
Razor Class Library

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about this.

⏯ Playground Link

No response

💻 Code

When building an ASPNET RCL with Razor & Typescript, there is a TypeScript MSBuild Target named GetTypeScriptOutputForPublishing which is adding the .js output files back as Content

<Content Include="@(GeneratedJavascript->'%(Identity)')" />

For example, "outDir": "tsgen" (can't be in wwwroot because of how .gitignore works with RCLs).

I tried various settings, like this:

 <!--Remove generated JS and .d.ts from packing--> 
<ItemGroup>
	<Content Remove="tsgen\**\*.js" />
	<Content Remove="tsgen\**\*.d.ts" />
	<None Remove="tsgen\**\*.js" />
	<None Remove="tsgen\**\*.d.ts" />
</ItemGroup>

 <!--Explicitly mark them as non-packable--> 
<ItemGroup>
	<None Include="tsgen\**\*" Pack="false" />
</ItemGroup>

The Pack=False is occurring before GetTypeScriptOutputForPublishing, therefore TypeScript overrides my effort to remove those.
NuGet is then correctly including that content in Pack.

To remove those files after the TypeScript target, I have to add this to my project:

<!--Remove generated JS and .d.ts from packing-->
<Target Name="RemoveDistFiles" AfterTargets="GetTypeScriptOutputForPublishing">
	<ItemGroup>
		<Content Remove="tsgen\**" />
		<None Include="tsgen\**" >
			<Pack>False</Pack>
		</None>
	</ItemGroup>
</Target>

Then in the generated nupkg, the tsgen\ files were then no longer packed.

🙁 Actual behavior

The GetTypeScriptOutputForPublishing inclues the removed content.

🙂 Expected behavior

That GetTypeScriptOutputForPublishing does not include the removed content.

Additional information about the issue

The reason I need this is because I'm using WebPack to bundle the TypeScript output, but I don't need the actual TypeScript output included in the package.

[MartinJohns]

Your search terms seem excessive. It's better than use fewer search terms, instead of describing your entire issue in the search field.

The behavior sounds like it's working correctly, and you have a perfectly fine and viable workaround.

[marqdouj]

@MartinJohns I moved the narrative.
In any case, yes it works... but I it took me months to figure it out. Finally took a MS Engineer in VS to help me out with the solution. He said he was going to submit a ticket to the TypeScript team, but that was months ago and I don't know what happened to it.

In the least, this should be mentioned in the TypeScript docs... I would think (suggest).

[joj]

I don't fully understand your scenario. Are you packing the typescript files directly or are you just not packing any javascript/typescript content? And in either case, do you even need to generate javascript at all if you're not packing it? We are adding javascript generated by tsc as Content, which I think is correct, and we're adding it so it will end up in artifacts (like pack but also others). If you want to prevent that the correct way of doing it is not to remove Content, but to remove GeneratedJavaScript before GetTypeScriptOutputForPublishing. The question is if you actually need GeneratedJavaScript for anything and if you don't, then your best bet is probably not to use the nuget at all (for building). Again. all of this guessing on your scenario :)

[joj]

Small clarification: when you Remove from Content, you're actually removing those items from the collection. They don't exist anywhere after that. It's not possible for us to use that as a condition for removing from our Content generation. We could have some sort of "DontInclude" item where you add what you don't need, and then we don't add it to Content... but the real question is what you need generated js at all if you're not going to add it to any collection.

[marqdouj]

Hi @joj

After reading your comments, I had to go back and think about what I'm really trying to do here.
I'm fairly new to TypeScript/Js and started learning it because I'm finding it useful for what I want to do in Blazor.

As a personal project, I decided to tackle the Azure Maps SDK in Blazor. After extensive research, I figured the best way was to use TypeScript/Js in a RCL and create a NuGet package so I could reuse it in many of my other projects. I did that and it seems to work fine, however I decided I needed to bundle the output so I configured my RCL to also use WebPack to create a single file.

I now realize (after thinking about your comments), that maybe I don't need the TypeScript NuGet package at all; WebPack is doing all the work anyway. So I removed the TypeScript package from my project (just now as a test) and it works just fine.
However, I noticed I don't get some of the IDE featues of the TypeScript package that I find extremely useful; i.e. node_modules is included in the project and tsgen (the output folder) is cleaned properly before each build. When I remove the NuGet package node_modules does not show up in the IDE (I could include it manually in the project, but the NuGet package handles that gracefully) and the output folder is not cleaned before each build.

As I mentioned, I am fairly new to all this; feel free to suggest other configurations etc. you think might better serve what I want to do.

GitHub Repo
NuGet Package

Thanks

[joj]

That's correct. We use the nuget package both for language services (that is, IDE support) and building. What you can do is include the nuget, and set the TypeScriptCompileBlocked property to true. That will make the compilation a no-op, and you shouldn't have generated files.

[marqdouj]

Hi @joj

Where is the TypeScriptCompileBlocked property?

Okay, added it as:

	<PropertyGroup>
		<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
	</PropertyGroup>

Okay, node_modules stays in the IDE, but tsgen (output folder) does not. I kinda like reviewing the output *.js.

Thanks.

[marqdouj]

Hi @joj

So, in Edge I asked ChatGP this question:
give me a webpack + ts-loader + tsc hybrid setup so you get both the bundle and the individual .js files

The response was 100% correct and works great.

Here is what I had to do:

1. Change my scripts in package.json:

 "scripts": {
   "build:tsc": "tsc",
   "build:webpack": "webpack",
   "build": "npm run build:tsc && npm run build:webpack"
 },

2. Update *.csproj to run the 'build' script:

  <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
    <Exec Command="call npm run build" />
  </Target>

[marqdouj]

Also, if you don't want to automatically run the build using the Target in *.csproj, Mads' extension works great in a RCL.

NPM Task Runner

[joj]

FWIW, the typescript nuget doesn't run package.json's npm builds at all. It runs tsc directly. If what you want is to run a build from package.json, I would keep the compilation blocked in msbuild, and add a target BeforeTargets="CoreCompile" (or after, it doesn't really matter... CoreCompile in this scenario is your C# build). I still want to understand your js situation: do you need js and are you deploying those files?

[marqdouj]

Hi @joj

The only reason I need the js is so WebPack can bundle it. I don't want to distribute the TypeScript output, just the bundled js from WebPack.

Did you look at the GitHub source code link I posted earlier - maybe that would help visualize my intentions?

[marqdouj]

Hi @joj

Okay, so I've spent the last couple of hours testing various scenarios and here is what I found works best for what I want to achieve:

1. Configure TypeScript as normal, let it do all the building of *.js and output to tsgen folder.
2. Configure WebPack to do nothing but bundle the *.js in tsgen (no requirement for tsc).
3. Update the *.csproj to use CoreCompile target:

  <Target Name="NpmBuild" BeforeTargets="CoreCompile">
    <Exec Command="call npm run build:webpack" />
  </Target>
  
  <Target Name="RemoveTsGenAsContent" AfterTargets="CoreCompile">
    <ItemGroup>
      <Content Remove="tsgen\**" />
    </ItemGroup>
  </Target>

The tsgen files don't get packed, and any updates to the *.ts files are bundled into the webpack output before the package is built.