Adding URL Rewrite for an Angular app deployed to Azure App Service

When deploying an Angular app onto Azure App Service, the routing is not going to work because Angular uses client side routing whereas by default, on an App Service, the routing is going to be server side. As a result, anything that's not the root domain is not going to point to index.html.

In order to fix this, you need to set up the App Service so that any route points back to index.html.

Azure App Service runs on IIS in the background so you need a web.config file to do a URL rewrite. To do this, you need to create a web.config file.

<configuration>

  <system.webServer>

    <rewrite>

      <rules>

        <rule name="angularjs routes"

        stopProcessing="true">

          <match url=".\*" />

          <conditions logicalGrouping="MatchAll">

            <add input="{REQUEST\_FILENAME}"

            matchType="IsFile" negate="true" />

            <add input="{REQUEST\_FILENAME}"

            matchType="IsDirectory" negate="true" />

            <add input="{REQUEST\_URI}"

            pattern="^/(api)" negate="true" />

          </conditions>

          <action type="Rewrite" url="/" />

        </rule>

      </rules>

    </rewrite>

  </system.webServer>

</configuration>

Then you need to add it to the angular-cli.json file in the Assets bit

{

"$schema": "./node\_modules/@angular/cli/lib/config/schema.json",

"project": {

"name": "quiz"

},

"apps": [

{

"root": "src",

"outDir": "dist",

"assets": [

"assets",

"favicon.ico",

"web.config"

],

When you run " ng build" now, it'll save web.config to the dist folder.