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!

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. — Krishna Veeramachaneni, Jul 24 '15 at 21:21

score 19 · Accepted Answer · edited Jul 26 '16 at 10:24

19

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>

edited Jul 26 '16 at 10:24

ro͢binmckenzie

325
3
11

answered Jul 30 '15 at 15:21

chrisco512

629
3
10

score 6 · Answer 2 · answered Dec 16 '15 at 12:21

6

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

answered Dec 16 '15 at 12:21

Marcus

443
6
6

this was perfect. thanks for the details on default ts mapping – celerno Dec 20 '15 at 21:52

score 3 · Answer 3 · answered Jul 28 '15 at 13:26

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.

answered Jul 28 '15 at 13:26

Eric

718
1
9
22

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. – user2444499 May 17 '17 at 00:17

score 0 · Answer 4 · answered Apr 12 '16 at 10:40

0

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.

answered Apr 12 '16 at 10:40

Daryl

18,592
9
78
145

score 0 · Answer 5 · answered Sep 30 '17 at 08:37

0

Add MIME to web.config: OR IIS.

answered Sep 30 '17 at 08:37

Vadim T

1

score 0 · Answer 6 · answered Feb 01 '19 at 12:05

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?

Chrome showing blank TypeScript file

6 Answers6