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)

Copacetic

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.

Originative

The .ts-files are still not copied when publishing the project, unfortunately. – Copacetic

@GeirSagberg make sure you publish 'Debug' configuration. Or just remove Condition="'$(Configuration)'=='Debug'" – Originative

This isn't working for me. Do I need to add this inside a certain section of the XML? – Hellenistic

@Hellenistic it should be near <Target Name="BeforeBuild"> commented element in csproj file. Make sure you are using 'Debug' configuration during publishing (current publishing setting, not project setting in vs). – Originative

@StasBerkov, adding it after the commented section worked, thanks! – Hellenistic

I also needed to add the mime type as per this answer before I could see them: #16602045 – Sarena

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.

Usurious

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.

Historiography

The .ts-files are copied to the output directory, but not to the PublishedWebsites/ProjectName/... subdirectory. I have the import clause in my .csproj... – Copacetic

To reproduce: 1. Create a new Web Application project (MVC). 2. Add a typescript file "file1.ts" with 'console.log("Hello world")', mark as "Copy Always". 3. Publish to file. 4. Note that only the "file1.js" is copied. I suspect this has something to do with the typescript compiler. – Copacetic

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://learn.microsoft.com/en-us/nuget/reference/nuspec

I hope this will save time for someone else!

Deandre