Angular直接输入URL路由失效：本地正常IIS异常求助

1. SPA路由机制差异：Angular是单页应用（SPA），前端路由仅通过浏览器端JS处理页面跳转。页面内点击链接时，Angular会拦截导航事件，在不向服务器发送新请求的情况下完成视图切换，因此能正常工作。但手动输入URL或刷新页面时，浏览器会直接向IIS发起请求，IIS会尝试寻找对应物理路径的文件（例如请求/about/test时，IIS会查找about/test.html或对应目录），而SPA只有index.html一个入口文件，找不到匹配资源就返回404。
2. 路由配置顺序错误：你的路由配置中，通配符路由**放在了about/:name前面。Angular路由是按从上到下的顺序匹配的，这会导致**优先匹配所有请求，about/:name路由永远不会被命中——本地看似正常是因为两个路由都指向同一组件，但逻辑上存在错误。

1. 修正Angular路由配置 #

调整路由顺序，将具体路由放在通配符路由之前，确保匹配优先级正确：

RouterModule.forRoot([
  { path: 'about/:name', component: HomeComponent },
  { path: '**', component: HomeComponent },
])

修改后重新执行构建命令（ng build --prod或对应环境指令），生成新的dist文件。

2. 添加IIS URL重写配置 #

在部署的dist目录下创建web.config文件，添加以下内容，将所有非文件/非目录的请求重定向到index.html，交由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>
    <!-- 确保静态资源MIME类型正确 -->
    <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>

3. 确认IIS URL重写模块已安装 #

如果IIS未安装URL重写模块，上述规则无法生效：

• 打开IIS管理器，查看“模块”列表中是否存在URL Rewrite；
• 若未安装，可通过服务器管理器的“添加角色和功能”向导，在Web服务器（IIS）的角色服务中找到并安装URL重写模块，或下载对应IIS版本的URL重写安装包进行安装。

4. 重新部署验证 #

将修正后的dist文件和web.config一同部署到IIS，重启网站后测试手动输入URL、刷新页面等场景，确认路由正常工作。

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