IIS部署toh后显示Dashboard Heroes而非正常页面求助

1. 确认Angular项目构建有效性 #

• 执行生产环境构建命令：Angular 12及以前用 ng build --prod，Angular 13+用 ng build --configuration production
• 检查dist目录下是否生成完整静态资源（index.html、css、js文件夹等），确保构建过程无报错

2. 核对IIS站点基础配置 #

• 站点物理路径必须指向Angular构建后的dist/[项目名称]子目录，而非根dist目录
• 确认站点绑定的端口、主机名无冲突，访问地址与配置一致

3. 修复单页应用路由刷新404问题 #

Angular是单页应用，直接刷新路由会触发IIS请求静态文件导致404，需配置URL重写：

1. 安装IIS的URL重写模块（可通过IIS管理器“模块”选项检查，未安装则从Windows功能中添加）
2. 在项目构建目录（dist下的项目子目录）创建web.config文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <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="./index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
  </system.webServer>
</configuration>

该配置会将所有非文件/非目录的请求重定向到index.html，同时补充Angular所需的MIME类型，避免资源加载失败

4. 检查目录权限 #

• 确保IIS应用池身份（默认ApplicationPoolIdentity）对dist目录拥有读取权限
• 右键目标目录→属性→安全→添加IIS_IUSRS或对应应用池身份，赋予读取权限

5. 排查资源加载路径错误 #

• 打开浏览器开发者工具（F12）→“网络”标签，刷新页面查看是否存在404状态的资源（css、js等）
• 若路径错误，调整构建时的base-href参数：部署到站点根目录用 ng build --prod --base-href /，部署到子应用（如http://localhost/toh）用 ng build --prod --base-href /toh/

6. 启用IIS静态内容功能 #

• 打开“控制面板→程序→启用或关闭Windows功能→Internet Information Services→万维网服务→常见HTTP功能→静态内容”，勾选后确认启用

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