How to include TypeScript files when publishing?

Question

I have an MVC 5.1 web application where I have recently started using TypeScript. I want to use sourcemapping, so I have included both the .ts, .js and .js.map-files in the project.

When I publish the application (to e.g. file system or Azure), only the .js and .js.min files are copied, not the .ts-file. This means that I do not get source mapping on the published site.

The TypeScript file has "Build Action": "TypeScriptCompile", and I have tested "Copy to Output Directory" both with "Do not copy" and "Copy always", still the .ts-file is not published.

How can I include the .ts-files when publishing my application?

(I am using VS2013 Update 2 with TypeScript 1.0.1 and Web Essentials 2013 for Update 2)

Answer 1

I achieved this by editing project (csproj) file. I included .ts (they are stored in TypeScriptCompile item) files into Content item i.e.

  <Target Name="AddTsToContent" AfterTargets="CompileTypeScript" Condition="'$(BuildingProject)' != 'false'">
     <ItemGroup>
        <Content Include="@(TypeScriptCompile)" Condition="'$(Configuration)'=='Debug'"/>
     </ItemGroup>
  </Target>

Note: Because of the condition, this includes the TypeScript content only for the Debug build configuration.

Answer 2

Based on Stas Berkov's answer, I am conditionally including the .ts files only when the source maps are generated (as configured in the TypeScript Build tab of the project's properties).

<Target Name="AddTsToContent" AfterTargets="CompileTypeScript" Condition="'$(BuildingProject)' != 'false'">
  <ItemGroup>
    <Content Include="@(TypeScriptCompile)" Condition="'$(TypeScriptSourceMap)' == 'true'"/>
  </ItemGroup>
</Target>

I placed this as the last element in <Project> of the .csproj file.

Answer 3

First, you can have a look at your published directory to see if the files are there. You can reproduce this locally with MSBuild:

msbuild path/to/your/solution.sln-or-project.csproj /p:OutputPath=path/to/outputFolder /p:Configuration=Release

After run this command, you can search for your .ts files in the folder:

outputFolder/_bin/PublishedWebsites/YourProjectName/

All outputs of a project are copied to the output directory during the execution of the MSBuild task "CopyFilesToOutputDirectory".

If after run the MSBuild command your .ts files that are marked as "Copy Always" or "Copy If Newer" are still not being copied, chances are that your project file does not import the common targets file provided by Microsoft, in which the task "CopyFilesToOutputDirectory" is defined.

In which case, edit your .csproj file, adding an import clause to the appropriate file, as below:

<Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />

Try run the MSBuild command again after the Microsoft.WebApplication.targets has been imported, and the files marked to be published should now be in the output folder.

Answer 4

Found this thread and the solution from @StanislavBerkov worked perfectly to get publish to include ts-files. When deploying our solution via Octopus deploy we started getting problems though, no ts-files were added yet again.

Checked our msbuild command at our build server and added a output path.

& "C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\MSBuild\15.0\Bin\msbuild.exe" "C:\Users\MyUser\Documents\Project\Solution\solution.sln" /t:"Clean;Build" /p:Configuration=Release /p:OutputPath="C:\Users\MyUser\Documents\Project\outputFolder" /p:AllowedReferenceRelatedFileExtensions=none /p:RunOctoPack=true /p:OctoPackEnforceAddingFiles=true /p:OctoPackNuGetProperties="env=Test;change=TestChange"

Looking at _PublishedWebsites in outputFolder all .ts-files were present. However looking at the generated .nupkg file generated by Octopack all ts-files were gone! Apparently Octopack does not include TypeScript files.

https://help.octopus.com/t/octopack-doesnt-include-typescript-output-files/5009

Solved this by adding all files recursively in NuSpec file like this: <file src="src/**/*.ts" />.

https://octopus.com/docs/packaging-applications/creating-packages/nuget-packages/using-octopack/octopack-to-include-buildevent-files

How to include directories recursively in NuSpec file

Complete nuspec for reference:

<?xml version="1.0"?>
<package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
  <metadata>
    <id>Project.Web.$env$</id>
    <version>$version$</version>
    <authors>Administrator</authors>
    <owners>Administrator</owners>
    <licenseUrl>http://example.com</licenseUrl>
    <projectUrl>http://example.com</projectUrl>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>Project nuget packages</description>
    <releaseNotes />
  </metadata>

   <files>
      <file src="src/dist/" target="/" />
      <file src="src/**/*.ts" />
   </files>
</package>

https://docs.microsoft.com/en-us/nuget/reference/nuspec

I hope this will save time for someone else!