By default, the App Service you create will take the request URL and match it to a file. Since Angular (and other SPA frameworks) use an internal router to match the URL to a page, you need to make Azure App Service aware of that.

1. Create a new file with the name web.config in the src folder of your Angular project and write the following XML in it:

    <configuration>
        <system.webServer>
          <rewrite>
            <rules>
              <rule name="redirect to Angular" 
                  stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" 
                      matchType="IsFile"negate="true" />
                  <add input="{REQUEST_FILENAME}" 
                  matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" 
                appendQueryString="true"/>
              </rule>
            </rules>
          </rewrite>
        </system.webServer>
    </configuration>

2. This file will create a rule inside the IIS web server that Azure App Service provides. The rule defines that any requested URL should be rewritten to the root of the Angular app.
3. In the angular.json file, add the web.config as an asset. This will make sure that when you build your Angular app, the web.config will be included in the artifacts folder:

    "assets": [
      "src/favicon.ico",
      "src/assets",
      "src/web.config"
    ],

Now we will move on to create an automated build and release pipeline to deploy the Angular app.