Azure静态Web Apps中嵌套Angular子应用加载失败求助

1. 修正静态Web应用路由配置 #

调整staticwebapp.config.json，优先处理app2的路由请求，同时排除app2的静态资源被主应用导航回退规则拦截：

{
  "routes": [
    {"route": "/app2/**", "rewrite": "/app2/index.html"},
    {"route": "/*", "rewrite": "/index.html"}
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": [
      "/images/*.{png,jpg,gif}",
      "/css/*",
      "/app2/**/*"
    ]
  }
}

• 使用/app2/**而非/app2/*，确保匹配app2的所有子路由（如/app2/user/profile）
• 将app2的路由规则放在最前面，保证优先级高于主应用规则
• 在exclude中添加/app2/**/*，避免app2的静态资源被主应用的导航回退重定向

2. 确认app2的构建参数 #

重新构建app2时，同时指定--base-href和--deploy-url参数，确保资源引用路径正确：

ng build --base-href=/app2/ --deploy-url=/app2/

• --base-href设置应用的基础路径，确保路由跳转正确
• --deploy-url强制打包后的资源文件（js、css等）引用路径带上/app2/前缀，避免加载404

3. 验证app2的index.html资源路径 #

打开构建产物中app2/index.html，检查资源引用是否为/app2/开头，例如：

<script src="/app2/main.abc123.js"></script>
<link rel="stylesheet" href="/app2/styles.def456.css">

如果路径不符合，重新构建app2并确认参数无误。

4. 检查Azure部署文件完整性 #

登录Azure门户，进入静态Web Apps资源，在部署中心查看已上传的文件结构，确认app2/目录下所有文件（包括js、css、assets等）都已完整部署，没有遗漏或路径错误。

内容的提问来源于stack exchange，提问作者Ravi Kumar