部署在Azure Static Web App的Angular刷新时出现异常

我通过Github Actions将Angular应用部署至Azure Static Web Apps，staticwebapp.config.json配置如下：

{
  "trailingSlash": "auto",
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  },
  "mimeTypes": {
    ".json": "text/json",
    ".css": "text/css",
    ".scss": "text/x-scss",
    ".html": "text/html",
    ".svg": "image/svg+xml"
  }
}

本地使用Azure Static Web Apps模拟器测试一切正常，但部署后出现两个问题：

1. 刷新应用时，首页（登录页）URL会重复添加路由，导致应用无法使用并抛出错误；
2. 重新打开浏览器后应用可正常运行，但SVG资源路径错误，会以当前URL为基础请求资源（如请求https://myapp.com/login/assets/myicon.svg而非https://myapp.com/assets/myicon.svg）。

已尝试调整staticwebapp.config.json（添加routes属性）、配置Github Actions执行npm run build，均无效果，目前使用哈希定位策略临时解决问题。

1. SVG资源路径错误：相对路径解析偏差 #

问题根源是Angular构建时未指定根路径，导致资源输出为相对路径，部署后浏览器会基于当前URL层级解析资源，而非从站点根目录加载。

解决方法：

• 构建时显式指定根路径：
  在Github Actions的构建步骤中执行命令：

  npm run build --prod -- --base-href /
  

• 或在angular.json中永久配置：

  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/",
            // 其他配置项...
          }
        }
      }
    }
  }
  

  这样所有资源路径都会以/开头，确保从站点根目录加载。

2. 刷新路由重复：路由规则与Angular策略不兼容 #

trailingSlash: "auto"的设置会让Azure Static Web Apps自动添加/移除尾部斜杠，和Angular默认的PathLocationStrategy配合时，容易触发重复重定向，导致URL路由叠加。

解决方法：

• 修改staticwebapp.config.json：
  1. 将trailingSlash改为"never"，匹配Angular路由的默认行为；
  2. 补充routes规则，明确所有非静态资源路由重写到index.html：

  {
    "trailingSlash": "never",
    "routes": [
      {
        "route": "/*",
        "rewrite": "/index.html",
        "exclude": ["*.{css,js,png,gif,ico,jpg,svg}"]
      }
    ],
    "navigationFallback": {
      "rewrite": "/index.html",
      "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
    },
    "mimeTypes": {
      ".json": "text/json",
      ".css": "text/css",
      ".scss": "text/x-scss",
      ".html": "text/html",
      ".svg": "image/svg+xml"
    }
  }
  

• 检查Github Actions部署步骤，确保构建产物完整上传，清理旧配置缓存。

本地模拟器正常的原因 #

本地模拟器对路径解析的容错性更高，不会像生产环境那样严格执行HTTP重定向规则，因此不会暴露相对路径和路由重定向的冲突问题。

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