Chrome showing blank TypeScript file

Question

I am setting up a new TypeScript project in visual studio 2013.

I have the option on my VS project to generate source maps checked. I have the option to specify root directory for typescript files and specify root directory for sourcemap files unchecked.

I have the option in Chrome Dev tools to enable JS sourcemaps checked.

At the bottom of my generated app.js file I see:

//# sourceMappingURL=app.js.map

And that file exists.

I do not see the source maps being downloaded in the network pane, and when I open the .ts file in the sources pane, I just see a blank file.

Any ideas? Thanks!

Answer 1

Place this in your web.config to serve up the TS files:

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

Answer 2

Cordle's answer worked for me, but I also needed to remove the existing MIME map for .ts.

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

The default MIME map for .ts files was "video/vnd.dlna.mpeg-tts".

Answer 3

I figured out what was going on. I needed to add a mime map for the extension .ts either in IIS or in my web.config. So the browser was asking for the TypeScript file but not getting anything back, therefore it showed up blank.