angular app's routing not working when deployed using Azure Static App

Question

I used ng build --prod to product ethe dist folder locally then I created a storage account in azure and turned on "Static App" Then I uploaded the contents of dist/xxx folder to $web folder but when I navigate to any route I get

[![enter image description here][1]][1]

things I tried

1. set $web to blob(anonymous) access
2. added file staticwebapp.config.json at same level where package.json is and build and uploaded the files again to container
3. used routes.json file

for staticwebapp.config files i used following

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

and

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

and

{
"navigationFallback": {
 "rewrite": "index.html"
}
}

Normally when others having similar issue they are able to navigate to a page and when they refresh they see this problem. but in my case i get this error as soon as i navigate first. [1]: https://i.sstatic.net/EqV2L.png

Answer 1

According to the Microsoft Documentation,

_routes.json that was previously used to configure routing is deprecated. Use staticwebapp.config.json as described in this article to configure routing and other settings for your static web app.

Fallback routes:

Example code that returns /index.html for all static file requests.

{ 
  "navigationFallback": { 
    "rewrite": "/index.html"
  } 
}

The Example configuration file from the MS Documentation.

For further information look the similar issue fixed here.