Angular部署至IIS后手动输入URL或刷新页面出现500错误

问题根源 #

Angular是单页应用（SPA），非哈希路由的URL（如/user/profile）会被浏览器直接发送给IIS服务器。IIS会尝试寻找对应物理路径的文件或目录，找不到就返回500错误。正确的做法是让所有非静态资源的请求都转发到Angular的入口文件index.html，由Angular自身处理路由。

必要前提 #

确保你的IIS服务器已安装URL Rewrite模块：

• 打开IIS管理器，点击服务器节点，在右侧“管理”区域选择“Web平台安装器”
• 搜索“URL Rewrite”并安装

修正后的web.config配置 #

替换你当前的web.config为以下内容，重点修正了路由重写的目标路径：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <!-- HTTPS重定向规则保留 -->
                <rule name="Redirect to https" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
                <!-- 修正Angular路由重写规则 -->
                <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>
                    <!-- 改为指向index.html而非根路径，适配根目录/虚拟目录部署 -->
                    <action type="Rewrite" url="./index.html" />
                </rule>
            </rules>
        </rewrite>
        <!-- 可选：添加静态资源缓存，优化加载速度 -->
        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
        </staticContent>
    </system.webServer>
</configuration>

关键调整说明 #

1. 重写目标路径：将原规则中的url="/"改为url="./index.html"，确保无论部署在IIS根目录还是虚拟目录，都能正确定位到Angular的入口文件。如果部署在虚拟目录（如http://your-domain.com/my-app），也可以明确写为url="/my-app/index.html"。
2. 规则名称修正：将原AngularJS Routes改为Angular Routes，避免混淆AngularJS（1.x）和Angular（2+）。

额外排查步骤 #

如果仍出现500错误，按以下步骤排查：

• 查看IIS详细错误日志：IIS管理器 → 目标站点 → 右侧“日志”区域，或事件查看器的“Windows日志 → 应用程序”，获取具体错误原因（如权限不足、模块未安装等）。
• 确认Angular构建产物完整：使用ng build --configuration production构建项目，将dist目录下的所有文件上传到IIS站点根目录。
• 检查应用程序池权限：确保IIS应用程序池的身份对站点目录有读取权限。

为什么哈希路由能临时解决 #

哈希路由的URL（如/#/user/profile）中，#后的哈希部分不会发送到服务器，IIS仅处理根路径请求，因此不会触发文件查找错误。但非哈希路由更符合现代Web应用的URL规范，是更优的长期解决方案。

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