Azure Static Web Apps are great but with some caveats. The one thing I struggled with way longer than I should have was getting an Angular app configured properly for Azure SWA’s.
Everything ran great locally but deep linking or refreshes failed after we deployed. Simple page refreshes resulted in a 404. Non-angular routing links also resulted in a 404.
There’s thorough documentation to include the staticwebapp.config.json with the navigationFallback set which should fix the 404 errors. For some reason Angular was ignoring those settings.
My setup: Azure Static Web Apps with Azure Functions as the API. They’re written in C# as an Azure Functions App. The source control and deployments were managed through Azure DevOps. I tried manually deploying the staticwebapp.config.json file to the build pipeline but to no avail.
The trick: Include the staticwebapp.config.json in the angular.json file.
"assets": [
"src/favicon.ico",
"src/assets",
"src/staticwebapp.config.json"Short. Simple. And it works.
One library I haven’t investigated with Azure deploy for Angular. This seems to be older than the Static Web Apps so I’m not sure how well it works. Unfortunately, I didn’t find this library till after the deployment issue was resolved.
Additional Resources:
All Things Dave 