Web.config for hosting an Angular application on Azure Web App

If you host an Angular application on Microsoft Azure you probably want to define a mimemap for .json and .woff / .woff2 files to get rid of the console errors. Also in order to enable client side routing we have to add a rewrite rule.

This is how my web.config looks like:

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <remove fileExtension=".woff"/>
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
     </staticContent>

      <rewrite>
        <rules>
            <rule name="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="/" />
            </rule>
        </rules>
        </rewrite>
    </system.webServer>
</configuration>

To ensure the config gets deployed, put it in the src directory:

vs

And add it to list of assets within the .angular-cli.json:

cli

 

2 thoughts on “Web.config for hosting an Angular application on Azure Web App”

  1. Hi there.
    I am using IIS to deploy an Angular application.
    I noted that after ng build, when I try to use in production that application/x-www-form-urlencoded data is removed from header. The api receives a json empty. In development the api receives normally. Is it a web.config issue? Do you know how can I fix it?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s