Web Essentials: Compile all TypeScript files on build doesn't work

Question

Just as the title says: I have this option activated through Tools > Options > Web Essentials window, but the files aren't compiled on build. No warnings or errors, the Output panel dedicated to Web Essentials shows messages about compiling something, but nothing is actually done. No file of those, which appear in the output is actually compiled.

Is there any way to find out what exactly it is doing? I have made manual modifications to the project file. I haven't seen anything related to Web Essentials in the project file though.

Is there any other way to troubleshoot this?

Answer 1

Even if using WebEssentials to control if all files should be compiled on build works, it could bring you some problems:

• If you are using a build machine, continuous integration with TFS, etc. your build process will not apply the same rules, as WebEssentials is a Visual Studio extension and won't be accessible by the building process;

• You need to rebuild your project to test your changes, unless you also set the WebEsentials option "Compile TypeScript on save" to true, what can be a bit redundant if you're compiling also during the build;

The solution:

• Keep WebEssentials "Compile TypeScript on save" set to true;
• Add the TypeScript .targets file to your .csproj file. For this, open YourProject.csproj file outside of Visual Studio using a text editor:
• Change your "import section" to look like this:

<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
.
.
.
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />

This will be enough to ensure that TypeScript compiler will be called during the build with default options to build all .js files.

• If you want your files to be built with custom compiler options, set the settings for each build definition (e.g Debug/Release):

<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
    <DebugSymbols>true</DebugSymbols>
    .
    .
    .
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
</PropertyGroup>

This setup will also allows you to have different settings per project, which is good for flexibility.

During the build process, the TypeScript compiler will be called using the settings defined in the current build definition. For instance, as you set TypeScriptTarget to ES5 in the settings above, the executed command line will be something like

tsc.exe --target ES5

Note that only the files marked with BuildAction = TypeScriptCompile will be processed. You can check/change the BuildAction for a file in the solution explorer, properties panel: