Angular 18 app on Azure static web app - Fix 404 error on a browser refresh
mikemasaru
Posted on August 11, 2024
I had an issue where I deployed an Angular 18 app on an Azure Static Web App. It worked fine when first launching from the root URL but a browser refresh or a manual directed url (ie. azurestaticapps.net/user/1) would result in a 404 error. A web search directed me to create a web.config in the root or src directory but after a day of trying different combinations I could not get it to work properly. Here is how i fixed it:
Instead what I needed was to create a file called: "staticwebapp.config.json" in the src folder with the following json:
{
"navigationFallback": {
"rewrite": "/"
}
}
In the "angular.json" file add the path to the staticwebapp.config.json file to all instances of "assets"
"assets": [
"src/favicon.ico",
"src/assets",
"src/staticwebapp.config.json
],
Then deploy and it should work as expected. Hope this helps others.
Posted on August 11, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.