Angular 9部署Azure App Service刷新含JS/CSS的加密ID路由报错

问题根源 #

当前的URL重写规则采用否定前瞻匹配任意位置的静态资源关键字（如.js、css），只要URL中（包括路由参数里的加密ID）出现这些字符串，就会跳过重写逻辑，直接让服务器处理请求。但这些路由是Angular的虚拟路由，服务器不存在对应的物理资源，因此返回The resource you are looking for has been removed...错误。

推荐解决方案：基于物理文件/目录判断的重写规则 #

这种方式更健壮，不会因路由参数中的特殊字符误判，逻辑是：仅当请求的路径不是物理文件、也不是物理目录时，才重写到Angular入口文件；同时直接放行API和Swagger路径给后端处理。

修改后的web.config重写规则如下：

<rewrite>
  <rules>
    <!-- 直接放行API和Swagger路径，交给.NET后端处理 -->
    <rule name="Skip API and Swagger" stopProcessing="true">
      <match url="^(api|swagger)" />
      <action type="None" />
    </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>
      <action type="Rewrite" url="/index_po.html" appendQueryString="true" />
    </rule>
  </rules>
</rewrite>

备选方案：调整静态资源匹配逻辑（仅匹配文件后缀） #

如果要保留原有的否定前瞻思路，需修改匹配模式，让它仅匹配以静态资源后缀结尾的路径，而非任意位置的字符串，避免误判路由参数中的关键字：

<rewrite>
  <rules>
    <rule name="Angular Routes" stopProcessing="true">
      <match url="^(?!.*\.(chunk.js|js|map|js.gz|css|css.gz|png|jpg|ico|eot|woff|woff2|ttf|json|html)$|api|swagger).*$" />
      <action type="Rewrite" url="/index_po.html" appendQueryString="true" />
    </rule>
  </rules>
</rewrite>

关键修改点 #

• 将原规则中的.*(.chunk.js|js|css|...)改为.*\.(chunk.js|js|css|...)，确保仅匹配带点后缀的静态资源文件
• 用$限定匹配到URL结尾，避免中间路径片段误触发
• 单独拆分api|swagger路径，确保后端接口正常访问

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