I'm working on an ASP.NET Core site that's an Angular + TypeScript app leveraging all of the goodies in the new web template including the use of a task runner like Gulp. As I'm running my site I wanted to debug my TypeScript files in the Chrome debugger, but upon selecting the file it appeared blank. The .js files appeared correctly, but not the TypeScript files. There are just a few steps to follow to get the all the needed files to load into the browser properly.
1. Update startup.cs Configuration
Ensure the ASP.NET core application is set to serve up static files. To do this, configure the middleware to enable static files to be served to wwwroot. This makes wwwroot servable. You should also depending on the site your creating have the middleware configured to serve up a default home page to your base URL. Odds are you already had both of these steps complete or your site wouldn't even work, but to be thorough make sure you have the following in startup.cs:
2. Update tsconfig.json
In order to create the map file, make sure the following setting is in your tsconfig.json file and set to 'true':
3. Update gulp.js tasks
The last step is to ensure that the TypeScript files are copied out to your deployment target (i.e. wwwroot). Typically using gulp you'd have both development and release configurations. Ensure that for your dev settings or for whenever you want to debug TypeScript (.ts) files, you add a command to also copy out the TypeScript files as well. Normally only the .js files are needed by the browser, so often we'll overlook copying out the TypeScript files, but this is important so the browser has access and can display them correctly.
That should do it - now when you open the Chrome debugger and click on a TypeScript file it should load properly.