将Angular项目部署到IIS报404错误：资源加载失败如何解决？

按以下优先级逐一排查修复：

• 检查base标签配置
  Angular单页应用依赖index.html中的<base href>标签解析资源相对路径，配置和实际部署路径不匹配是最高发的原因：
  • 部署在IIS站点根目录时，配置为<base href="/">
  • 部署在站点子目录（例如站点下的/app/路径）时，配置为<base href="/app/">，路径末尾必须加斜杠
  • 可以直接在构建时传入参数避免手动修改：ng build --configuration=production --base-href=/你的部署路径/
• 配置IIS单页应用重写规则
  Angular前端路由不会在服务端存在对应物理文件，没有重写规则的情况下刷新子路由、直接访问深层路径都会触发404：
  • 先确认IIS服务器已安装URL Rewrite组件，未安装的话通过Web平台安装程序搜索安装即可
  • 在Angular部署文件的根目录新建web.config文件，写入以下配置：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularRoute" 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" />
          <!-- 部署在子目录时，将上面的路径改为/你的子目录名/index.html -->
        </rule>
      </rules>
    </rewrite>
    <!-- 补充静态资源MIME类型，避免IIS拦截未知后缀资源返回404 -->
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>
</configuration>

• 检查目录权限
  右键Angular部署文件所在的物理文件夹，打开属性-安全面板，确认IIS_IUSRS用户组、当前站点对应应用程序池的标识账号拥有该目录的读取、列出文件内容、执行权限，权限不足会导致IIS无法返回静态文件触发404。
• 校验构建产物完整性
  确认上传到IIS的文件为ng build生成的dist目录下的全部内容，不要遗漏js、css、字体、图片等静态资源文件；如果构建时使用了--deploy-url参数，确认参数值和实际部署的资源访问路径完全一致，避免浏览器请求错误路径。
• 精准定位404请求
  打开Chrome控制台的Network面板，筛选状态为404的请求，根据请求路径快速定位问题：
  • 若请求路径缺少/多拼了子目录前缀，直接修正base href或deploy-url配置
  • 若请求路径和物理文件路径完全匹配仍返回404，优先检查MIME类型配置、文件系统权限
  • 若仅刷新子路由时出现404，优先检查URL重写规则是否生效、URL Rewrite组件是否正确安装

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