I have one subdirectory angular build inside my main angular build and its not working in static web apps azure

Question

I have two apps. One is app1 which is main app and another is app2. Both are angular apps. I build my app1 for root and placed my app2 build inside app1 build in app2 folder. I build app2 for subdirectory with --base-href=/app2/.

Now build look like below structure:

Build Directory

• app2/
  • index.html
  • ...other.files
• index.html
• ...other files
• staticwebapp.config.json

Current staticwebapp.config.json's content:

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

After deployment, when I try to acess app2 then its not loading app.

Please let me know how I can solve this issue.

Answer 1

I have deployed sub directory app using through staticwebapp.config.json file. I did following configuration changes:

{
  "routes": [
    {
      "route": "/app2/*.{png,jpg,gif,ico,js,css,woff,woff2}",
      "headers": {
        "Cache-Control": "public, max-age=604800, immutable"
      }
    },
    {
      "route": "/app2/*",
      "rewrite": "/app2/index.html"
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["favicon.ico", "/images/*.{png,jpg,gif}", "/css/*", "/creditapp/*"]
  }
}