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": "/"
    }
}

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.