Angular应用部署至Windows Server 2019 IIS遇空白页问题求助

• 确认IIS静态文件组件已安装
  打开服务器管理器 -> 添加角色和功能 -> 找到Web服务器(IIS) -> 角色服务 -> 确保勾选静态内容，安装后重启IIS。

• 配置web.config的单页应用重写规则
  在dist的项目子目录下创建或修改web.config，添加以下规则解决Angular路由问题：

  <?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=".js" mimeType="application/javascript" />
        <mimeMap fileExtension=".css" mimeType="text/css" />
        <mimeMap fileExtension=".html" mimeType="text/html" />
      </staticContent>
    </system.webServer>
  </configuration>
  

• 正确设置base href
  避免手动修改index.html，直接在build时指定路径：

  • 部署在站点根目录：执行ng build --base-href /
  • 部署在虚拟目录（如/angular-app）：执行ng build --base-href /angular-app/

• 检查IIS站点物理路径
  Angular 16执行ng build后，dist下会生成与项目同名的子文件夹（如dist/my-app），将IIS站点的物理路径指向这个子文件夹，而非dist根目录，否则会显示目录列表。

• 通过浏览器控制台定位问题
  按F12打开开发者工具：

  • 查看控制台的报错信息（如404），确认资源加载失败原因
  • 切换到网络标签，检查js、css、assets等资源的请求状态码

• 验证文件夹权限
  右键dist的项目子文件夹 -> 属性 -> 安全 -> 确保IIS应用池用户（默认是IIS AppPool\你的站点名称）拥有读取权限。

• 确认端口绑定无冲突
  打开IIS管理器 -> 目标站点 -> 绑定，确认81端口仅绑定当前站点；也可执行netstat -ano | findstr :81命令检查端口占用情况。

内容的提问来源于stack exchange，提问作者Dylan's Levy