IIS部署Angular应用刷新子路由跳回首页问题求助

问题定位 #

核心问题出在IIS重写规则的目标路径设置错误：当前规则将所有非文件/目录的请求直接重写到/AngularLogin（应用根路径），导致刷新时Angular无法获取到原始的路由参数（比如/home），只能加载默认的Login组件。

解决方案 #

1. 修改web.config的重写规则 #

将重写目标从/AngularLogin改为/AngularLogin/index.html，确保所有路由请求都转发到Angular的入口文件，让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>
          <!-- 修改此处的url目标路径 -->
          <action type="Rewrite" url="/AngularLogin/index.html" appendQueryString="false" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

2. 验证现有配置正确性 #

• base href配置：你的<base href="/AngularLogin/">与IIS映射的应用路径完全匹配，无需修改。
• Angular路由配置：当前路由规则逻辑正常，默认路径指向Login组件，子路由定义无问题，保持现有配置即可。

3. IIS环境检查 #

• 确认IIS已安装URL Rewrite模块，未安装的话重写规则不会生效。
• 确保Angular应用是通过ng build（生产环境用ng build --prod）构建的，产物完整部署到AngularLogin文件夹下。

测试验证 #

修改web.config后重启IIS站点，访问localhost/AngularLogin/home并刷新，此时应能正常加载Home组件，不会再跳转到Login页面。

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