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