AngularJS HTML5 Mode URL Rewrite to www. Version - angularjs

Question

I am hosting my AngularJS site in Azure, but running into issues when I only want to perform a URL rewrite to the www. version. I am using HTML5 mode for routing.
If I have the following web.config and refresh the page I get an error stating "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear/>
<rule name="WWW Rewrite" enabled="true">
<match url="(.*)"/>
<conditions>
<add input="{HTTP_HOST}" negate="true" pattern="^www\."/>
</conditions>
<action type="Redirect" url="http://www.{HTTP_HOST}/{R:0}" appendQueryString="true" redirectType="Permanent"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
If I leave my web.config as follows, I have no issues with refreshing, but I can't redirect to the www. version of my site:
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" 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>
How can I have both scenarios working together?

Answer 1

Try adding
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
to your conditions block.