TypeScript not compiling with WE3 and TS 0.9.1.1

Question

I just upgraded to the latest version of WebEssentials v3 and the TS files in my ASP MVC 4 project aren't compiling to JS anymore. I verified that the Options --> Text Editor --> TypeScript --> Project --> Automatically compile TypeScript files which are part of a project option is checked, but nothing happens when I save or compile my project. I've tried deleting the existing .js and .min.js files that WE2 created, but that didn't help. I tried adding a new TS file to my project that and didn't generate a JS file. I reinstalled TS 0.9.1.1 and that didn't help.

Sooooo what to do? Am I missing something obvious? Is something not working or do I just have the wrong expectations?

Do I need to go back to WE2?

Update: I even created a brand new ASP MVC 4 C# project to verify it wasn't just my original project, but I got the same results.

Interestingly enough, I just created a new TypeScript project and my TS files compiled properly on save... So that's interesting..

Answer 1

There are some links in the change log of WE3, here is the one describes how to enable the compile-on-save feature, see http://typescript.codeplex.com/wikipage?title=Compile-on-Save for details.

I've created a nuget package called Ltc.MSBuild.TS0911WE3.targets which will do the trick for you, just open Package Manager Console, type in Install-Package Ltc.MSBuild.TS0911WE3.targets!

Go to Ltc.MSBuild.TS0911WE3.targets on nuget.org.

Answer 2

I'm not sure if this is the correct method of dealing with the problem, but here's what I did to get "compile on save" working on my project...

After noticing that Compile On Save worked when starting from a new HTML Application with TypeScript project, I did a comparison between that and my non-working ASP MVC project. Turns out, my ASP MVC project was missing this bit of code..

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES3</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES3</TypeScriptTarget>
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />

Copy/pasting that into my ASP MVC project gave me Compile On Save support again. Of course, it's still not exactly what I expected. The resultant JS files are not added to the project automatically, so that's something I had to do manually. I also had to manually group the JS file with the TS file to mimic the same experience I was getting with WE2.

Hope that helps someone. Would love to hear some feedback on the solution.

Answer 3

Make sure your .proj file has a TypeScriptCompile XML section. You can copy from the typescript project if its not present.

Here is the specification : https://msbuildtypescript.codeplex.com/

Answer 4

using the "web essentials" tool (free, recomended) enable the preview pane in the web essentials options

Tools --> Options --> Web essentials --> Typescript: Show Preview Pane[X]

Now every time you save an open TS file, web essentials makes sure the file compiles (so it can display it) and you can update your javascript code while the project is running.