Angular 5部署IIS添加web.config后出现Internal Server Error及路由问题

嘿，我来帮你搞定这个Angular部署到IIS的路由问题！你遇到的internal server error很大概率是因为提供的web.config不完整（标签未闭合），而且缺少Angular单页应用必需的URL重写规则。

问题分析 #

Angular是单页应用（SPA），所有路由逻辑都在前端处理。当你直接访问某个路由URL（比如/dashboard）或者刷新页面时，IIS会默认去寻找对应的物理文件，找不到就会报错。另外你原有的web.config代码明显没写完（结尾是<system.we...），语法不规范也会直接触发500错误。

正确的web.config配置 #

替换成下面完整的配置文件，覆盖你现有的内容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <!-- 处理Angular所需的静态资源MIME类型 -->
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
      <mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
    <!-- 关键：URL重写规则，让所有请求转发到index.html，由Angular路由处理 -->
    <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>
  </system.webServer>
</configuration>

后续检查步骤 #

• 确认URL重写模块已安装：打开IIS管理器，查看站点的功能视图里有没有URL Rewrite模块。如果没有，需要在服务器管理器中添加Web服务器角色下的URL重写功能，或者直接下载安装对应版本的URL重写模块。
• 重启IIS站点：配置修改后，右键点击你的IIS站点，选择“重新启动”，确保配置生效。
• 测试路由：现在直接访问Angular的路由URL（比如/about）或者刷新页面，应该就能正常加载了。

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