Azure App Services部署Angular应用CSS被重定向至首页无法加载

该问题由Azure App Service的IIS托管配置缺失导致，和Angular应用构建逻辑无关：

• 部署Angular单页应用时如果没有自定义web.config配置，IIS会将所有请求（包括CSS、JS等静态资源请求）全部匹配SPA回退规则，重写到index.html主页面。访问CSS地址拿到的实际是首页HTML源码，响应头Content-Type为text/html而非text/css，浏览器自然无法将其识别为样式表资源。
• 服务器上存放的.gz/.br格式预压缩资源，因为缺少对应MIME类型映射和静态压缩配置，也无法被IIS正确识别返回。

1. 添加正确的web.config配置 #

在Angular项目的src目录下新建web.config文件，写入以下配置，明确区分静态资源请求和SPA路由回退逻辑，同时补全必要的MIME类型映射：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 静态资源直接返回，不触发路由回退 -->
        <rule name="StaticAssets" stopProcessing="true">
          <match url=".*\.(css|js|jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot|gz|br|map)$" />
          <action type="None" />
        </rule>
        <!-- 非静态/非存在路径的请求统一回退到index.html -->
        <rule name="AngularFallback" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <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>
    <staticContent>
      <!-- 补全常用静态资源MIME映射，避免IIS默认配置缺失 -->
      <remove fileExtension=".css" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
      <remove fileExtension=".js" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <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" />
      <!-- 预压缩资源MIME映射 -->
      <remove fileExtension=".gz" />
      <mimeMap fileExtension=".gz" mimeType="application/gzip" />
      <remove fileExtension=".br" />
      <mimeMap fileExtension=".br" mimeType="application/brotli" />
    </staticContent>
    <!-- 开启静态资源压缩支持 -->
    <urlCompression doStaticCompression="true" doDynamicCompression="false" />
  </system.webServer>
</configuration>

2. 配置构建规则确保配置文件随包部署 #

打开项目根目录的angular.json，找到生产构建对应的assets配置段，将新建的web.config加入资源列表，保证构建时该文件会被复制到dist输出目录根路径：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config"
]

3. 重新构建部署 #

执行生产构建命令ng build --configuration production，确认dist输出目录根路径存在web.config文件后，将dist目录下的所有内容重新部署到Azure App Service。部署完成后使用Ctrl+F5硬刷新浏览器清除本地缓存，即可看到样式正常加载，访问之前的CSS地址会返回正确的样式文本，响应头Content-Type为text/css。

排查注意：如果之前在Azure门户的站点配置中添加过全局路由重写规则，需要先删除，避免和web.config内的规则产生冲突。

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