Visual Studio 2013运行Angular 5应用出现空白页无报错问题

核心原因分析 #

你遇到的问题本质是Angular开发服务器（ng serve）和IIS Express的运行逻辑差异：ng serve会自动编译TypeScript代码、处理依赖路径、设置正确的基础路由；而直接通过VS访问testclient/src时，IIS Express只是静态托管源码文件——既没有编译TS文件，也没处理Angular的路由和资源路径，自然会出现空白页面。

分步解决方案 #

1. 不要直接访问src目录，先构建Angular项目

Angular的src是源码目录，浏览器无法直接解析.ts等源码文件，必须先构建生成可运行的静态文件：

• 打开命令行，进入testclient目录，执行构建命令：

  ng build --base-href "/testclient/"
  

  这里的--base-href是关键参数，它会适配IIS Express中testclient的路径位置。构建完成后，testclient目录下会生成dist文件夹，里面就是可部署的最终文件。

2. 将构建产物整合到Web API项目中

• 在Visual Studio的Web API项目里，新建一个名为testclient的文件夹（如果还没有）。
• 把testclient/dist下的所有文件复制到Web API项目的testclient文件夹中。
• 右键Web API项目 → 设置为启动项目，确保IIS Express会托管这个目录的静态文件。

3. 配置IIS Express支持静态文件与Angular路由

如果Web API项目未启用静态文件服务，需要修改web.config添加相关配置：

• 找到<system.webServer>节点，插入以下内容：

  <staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
    <mimeMap fileExtension=".js" mimeType="application/javascript" />
    <mimeMap fileExtension=".css" mimeType="text/css" />
    <mimeMap fileExtension=".html" mimeType="text/html" />
  </staticContent>
  <rewrite>
    <rules>
      <!-- 解决Angular单页路由刷新404的问题 -->
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/testclient/index.html" />
      </rule>
    </rules>
  </rewrite>
  

  这段配置一是让IIS正确识别Angular的静态文件类型，二是处理单页应用的路由跳转逻辑，避免刷新页面出现404。

4. 访问正确的路径

现在你应该通过localhost:5801/testclient访问Angular应用，而不是/testclient/src。启动VS调试后，打开浏览器访问这个地址，就能正常加载页面了。

额外提示 #

• 开发时如果需要实时看到代码变化，可以用ng build --watch命令，它会在你修改源码后自动重新构建，刷新浏览器即可看到更新。
• 确保Web API项目的IIS Express端口（这里是5801）未被占用，且项目的虚拟路径配置正确。

内容的提问来源于stack exchange，提问作者user2517610