Set up page reload/type script compilation on save in Visual Studio 2015 with typescript

      The goal is to be able to transfer the changes done in TS code during debugging onto the running website. This is possible in Visual Studio using the Browser Link functionality. Whenever we debug and we've got Browser Link Dashboard open - we should be able to see our browser of choice during the debug session listed under specific projects.

This can actually allow us to have the same project being run in multiple browsers and refreshed in all at the same time.

Straight away we learn about the particular items which must be fulfilled to make it work:

1.       Static HTML files linking should be enabled by adding the following to the Web.config:
 

<system.webServer>

<handlers>

<add name="Browser Link for HTML" path="*.html" verb="*" type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" resourceType="File" preCondition="integratedMode" />

</handlers>

2.       Debugging must be enabled in the Web.config file (this will typically be added to your web.config by default)

<system.web> <compilation debug="true" targetFramework="4.5.2"/>
 

3.       IIS server must run on .NET 4.0 or later.
 

4.       Compile on save has to be enabled in project options or particular setting in the csproj file has to be set (this can actually be changed mid-debugging):

Project properties:

Project file:

<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>

5.       Server side caching (files cached by IIS)

Add the following line to Web.config to instruct IIS not to cache files:

You need to set

<caching>
   <outputCache enableOutputCache="false" />
</caching>

or if its IIS 7+ (Which IIS Express will be)

<system.webServer>
    <caching enabled="false" />
</system.webServer>

6.       Client side caching (in-browser caching)

Chrome:
An option is to "Disable cache" in Dev Tools -> Networking
 

This will however force you to have Dev Tools open while debugging. There's a similar functionality for FireFox where caching can be only disabled for as long as long the developer tools are opened. To simplify working with such setup it's good to open Dev Tools in a separate window - even if you're not using it in this specific case you can keep it opened in the task bar.

7.       There are numerous examples of running Chrome in a non-caching mode, neither worked for me (chrome opened from command line with incognito mode, disabling application cache with an argument or outright setting the cache limit to a very small number. In my case it only worked for the first index file opened but the template html files used in components were not getting refreshed.

Environment used:
Visual Studio 2015 Update 3

Resharper 2016.2

Project created using Angular2WebTemplate

Someone's workaround:

http://stackoverflow.com/questions/41108995/using-angular-2-vs2015-and-iis-how-can-i-get-my-html-template-changes-to-refl

The "IsFileSystemCaseSensitive" parameter is not supported by the "FindConfigFiles" task error.

    I've recently started working on a small project with angular used on the front end. Part of it was adding the project from template (I've used a popular scaffolding Angular2WebTemplate). I've installed required nugets: Microsoft.TypeScript.Compiler and Microsoft.TypeScript.MSBuild.

After first build I've received the following error:
The "IsFileSystemCaseSensitive" parameter is not supported by the "FindConfigFiles" task error.

It took me a bit of digging to find this:
https://github.com/Microsoft/TypeScript/issues/15536

The issue seems to have been caused by two imports covering 2 different version of the same targets file. The solution was to remove one of the imports. Below a solution pasted from the above url:

Remove the local import (or Nuget import which ever one you choose). 

• local

 <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

• Nuget - should be near the end of the proj file

 <Import Project="..\packages\Microsoft.TypeScript.MSBuild.2.3.1\build\Microsoft.TypeScript.MSBuild.targets" Condition="Exists('..\packages\Microsoft.TypeScript.MSBuild.2.3.1\build\Microsoft.TypeScript.MSBuild.targets')" />

In my case I've removed the first entry which was enough to make the project compile and run.