如何用staticwebapp.config.json配置Azure Static WebApp多Angular应用导航回退？

答案是可以，你完全可以在同一个Azure Static Web App中托管多个由不同团队维护的Angular应用，并且可以通过官方推荐的staticwebapp.config.json替代已弃用的routes.json，实现各应用独立的导航回退配置，避免页面刷新时出现404错误。

配置方案 #

在docs根目录下创建（或替换）staticwebapp.config.json文件，通过routes数组配置不同路径的路由规则，对应到各自Angular应用的入口文件，具体配置如下：

{
  "routes": [
    {
      "route": "/angular-app-1/*",
      "serve": "/docs/angular-app-1/index.html",
      "statusCode": 200
    },
    {
      "route": "/angular-app-2/*",
      "serve": "/docs/angular-app-2/index.html",
      "statusCode": 200
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

关键说明 #

• 路径规则：serve字段需使用站点根路径（从/docs起始），确保Static Web App能准确定位到对应应用的index.html。
• 全局配置即可：无需在每个Angular应用的dist目录单独放置配置文件，仅需在部署根目录（docs）维护一份全局配置。
• 兼容原有逻辑：该配置完全替代了之前routes.json的功能，同时保留navigationFallback作为全局兜底规则（用于处理未匹配到的路径）。

验证要点 #

1. 确认每个Angular应用打包时已正确设置baseHref：
   • angular-app-1：baseHref="/angular-app-1/"
   • angular-app-2：baseHref="/angular-app-2/"
2. 部署时确保staticwebapp.config.json被包含在docs目录中，随应用包一同上传至Azure Static Web App。

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