Last Updated: February 16, 2017
· dustinrjo

Deep Linking AngularJS on Windows Azure IIS

To do proper deep linking in a single page AngularJS application you need to enable HTML5 mode in your router whether you use ui router or the default router.

To get HTML5 Mode to work within AngularJS, that is to have routes in your app that do not rely on a hash '#' to prevent server requests, you need server side logic to redirect all app specific route requests back to your Angular App.

If you are familiar with .htaccess rules for Apache, Azure Websites use the same concept only a different syntax, a rather undocumented xml formatted file called web.config that works in a similar manner.

Here is the web config code you have to add into your web config file:

            <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" />
                    <action type="Rewrite" url="/" />

Note you may already have a web config file with <configuration> and <system.webServer> blocks so just place the <rewrite> blocks inside of that.

This sample rule will take any incoming url and determine if it routes to a file on the system or directory on the system. If it is a file or directory that does exist, it will allow it to access that file or directory. However, if the url references a file or directory that does not exist, the server will return the root path to the request, which will map to your index.html where your Angular app runs and Angular will handle the route and render the views as you have them configured.


For a lot more info on web config rewrite rules, there is only one good source for this if you, like me, are hard coding this webconfig file in a text editor rather than automatically generating it from something like Visual Studio. Official Microsoft Documentation

7 Responses
Add your response

It worked perfectly

over 1 year ago ·

Hi, I have angularjs mvc4 app, where my entry of the app is index.chtml. I am using mvc4 layout page and .chtml so that I use it for bundling and minification. However post enabling html5 mode and adding the above module in my web config. My app is not working. It throws some index error in my entry page, ng-repeat. and adding "$ index" in the directive, causes the app to crash. Please help

over 1 year ago ·

Hi @abhijitsinha89 I don't know much about chtml nor using mvc4 for layouts, so I can't comment on how that might effect it, but if I had to guess your error is in your javascript within your app, not within your web.config file because if your web config was not working you would not reach your entry page at all, you would get a 404 error or something as you tried to reach endpoints that did not exist on the server. Hope that helps narrow it down. ^_^b

over 1 year ago ·

Hi, thanks a lot for this solution it worked really great and made it possible on to use HTML5 mode without any issues.

over 1 year ago ·

Hello, Thanks YOU Very Much.
I spent one hour to try to understand why angular ui-router links doesn't work correctly.

over 1 year ago ·

Superb - worked a treat. I struggled to find decent documentation on this.



over 1 year ago ·

web.config is actually a very well known configuration file for people in the .NET world. in particular is tightly integrated with IIS. The web.config is actually an IIS config and by including one in your site you're simply just overriding the server's copy of that config file. So if you're using Azure you won't see this file in your wwwroot directory. You just need to add it.

over 1 year ago ·