Chrome 显示空白的 TypeScript 文件

Question

我将在 visual studio 2013 年建立一个新的 TypeScript 项目。

我在我的 VS 项目上选中了生成源映射的选项。我可以选择为 typescript 文件指定根目录，并为未选中的 sourcemap 文件指定根目录。

我在 Chrome 开发工具中选择了启用 JS 源映射的选项。

在我生成的 app.js 文件的底部，我看到：

//# sourceMappingURL=app.js.map

并且该文件存在。

我没有在网络窗格中看到正在下载的源映射，当我在源窗格中打开 .ts 文件时，我只看到一个空白文件。

有什么想法吗？谢谢！

Answer 1

我明白是怎么回事了。我需要在 IIS 或我的 web.config 中为扩展名 .ts 添加 mime 映射。所以浏览器要求 TypeScript 文件但没有得到任何返回，因此它显示为空白。

Answer 2

将其放入您的 web.config 以提供 TS 文件：

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

Answer 3

Cordle 的回答对我有用，但我还需要删除 .ts 的现有 MIME 映射。

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

.ts 文件的默认 MIME 映射是 "video/vnd.dlna.mpeg-tts"。

Answer 4

我遇到了类似的问题，最后发现我列出了一个 SourceUrl

//# sourceURL=CommonLib.js

在我的Ts脚本的底部，导致Map和Ts文件的文件夹不一样

Answer 5

将 MIME 添加到 web.config: 或 IIS。

Answer 6

如果它在 localhost 上有效，但在发布到任何环境后显示空白，这可能是因为未包含 .ts 文件。

要在 Debug 发布中包含 .ts 文件，请将其添加到网络底部 .csproj 其他 <Target Name 所在的位置。如果您不想在每次发布时删除 .ts-files Condition="'$(Configuration)'=='Debug'".

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

来源： How to include TypeScript files when publishing?

Chrome 显示空白的 TypeScript 文件

Chrome showing blank TypeScript file

google-chrome

visual-studio-2013

typescript

source-maps