Angular 18 app on Azure static web app - Fix 404 error on a browser refresh

mikemasaru

mikemasaru

Posted on August 11, 2024

Angular 18 app on Azure static web app - Fix 404 error on a browser refresh

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": "/"
    }
}
Enter fullscreen mode Exit fullscreen mode

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
        ],
Enter fullscreen mode Exit fullscreen mode

Then deploy and it should work as expected. Hope this helps others.

💖 💪 🙅 🚩
mikemasaru
mikemasaru

Posted on August 11, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024