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

set $web to blob(anonymous) access
added file staticwebapp.config.json at same level where package.json is and build and uploaded the files again to container
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

David Birks · Accepted Answer · 2024-05-07 21:56:09Z

4

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.

edited May 7, 2024 at 21:56

David Birks

1652 silver badges5 bronze badges

answered Jul 15, 2022 at 11:22

RajkumarPalnati

7094 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Raas Masood Over a year ago

already used it as mentioned in the question but didnt worked.

BasicExp Over a year ago

You can also use this video tutorial from Microsoft if that is a preferred medium for you. As for the original post, it looks like they may have just been missing the .json suffix on their configuration file. The file should be staticwebapp.config.json

Aiden Dipple Over a year ago

Having .json or not made no difference for me ... neither solved the issue.

Menyus777 Over a year ago

Don't forget to move the file into the dist folder at build time. (angular.json file assets property)

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related