Apex Domain Angular Azure Static Web App - 404 on Refresh or Direct Link Navigation

Matt 1 Reputation point
2022-04-15T02:26:33.93+00:00

I have an Angular web application hosted with Azure Static Web App. I have registered the app with a custom domain using the apex domain(s) (www.<myapp>.com and <myapp>.com). I have added a staticwebapp.config.json to properly route refreshes or direct link navigation through the Angular application's routing. The staticwebapp.config.json contains the following content:
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/assets/images/.{png,jpg,gif}", "/css/"]
}
}

This configuration does not appear to be working. Navigating directly to valid application links loads the Azure 404 page instead of falling back to the app's routing. I am wondering if I am missing a piece of configuration for the apex domain to properly reroute to the client application.

The same configuration works fine in a separate Azure Static Web App deployment set up as the "staging" environment. It is using the same custom domain, but is using a different, non-apex subdomain (staging.<myapp>.com).

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
8,934 questions
Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
1,173 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.