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!

Chapiter

Try deleting the .js and .js.map files and regenerate the javascript code again and try to run again. Sometimes the map files get corrupted. – Dineric

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>

Waggish

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".

Journeywork

this was perfect. thanks for the details on default ts mapping – Sowers

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.

Chapiter

This explained why it worked for me in Chrome "out of the box" whilst another developer had to add the mimeMap to our web.config file. I already had a ".ts" mime type entry in IIS but the other developer didn't. – Dogvane

Answer 4

I had a similar issue, finally figured out that I had listed a SourceUrl

//# sourceURL=CommonLib.js

at the bottom of my Ts Script, which caused the folder of the Map and Ts file to be different.

Mckenna

Answer 5

Add MIME to web.config: OR IIS.

Helbona

Answer 6

If it works on localhost but shows blank after publishing to any environment it is probably due to that the .ts-files are not included.

To include .ts-files on Debug publish add this at the bottom of the web .csproj where the other <Target Name are. If you wan't .ts-files on every publish remove Condition="'$(Configuration)'=='Debug'".

<Target Name="AddTsToContent" AfterTargets="CompileTypeScript" Condition="'$(BuildingProject)' != 'false'">
   <ItemGroup>
      <Content Include="@(TypeScriptCompile)" Condition="'$(Configuration)'=='Debug'"/>
   </ItemGroup>
</Target>

Source: How to include TypeScript files when publishing?

Mercurialize