Empty TypeScript Files When Debugging

When developing TypeScript web apps in the browser, it uses a map file to load the TypeScript file that maps to a JavaScript file. You'll usually see something like this at the bottom of your JS files.

//# sourceMappingURL=app.js.map

Inside that map file is a bunch of JSON, including the name of the TS files that it maps to.

"sources":["app.ts"]

This causes the browser to go out and download the TS file so you can debug it in the browser developer tools.

Seems like every time I start a new project I run into the same problem. I go to debug my code, I open up the TS file in dev tools and it's empty. It takes me a minute then I say, "Oh yeah, I remember now!".

The problem is that IIS doesn't know how to serve TS files, so you have to tell it. All you have to do is go into the web.config file and add the following inside the system.webServer section:

  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".ts" mimeType="application/x-typescript" />
    </staticContent>
  </system.webServer>

This tells the server that whenever it sees a file extension of ".ts" that it's a TypeScript file. Now if you go back the browser and refresh you'll be able to see the contents of the mapped TS files.

Note: you can do this for any other file types IIS doesn't know about, such as audio/ogg. Any time the browser complains about not finding a file and you know the path is correct, it's probably because of the Mime type not being recognized.

Also note that you can do this within IIS too. Go to your website, open "Mime Types"and click Add to add it.