AngularJS HTML5 mode reloading page not found solution

Removing # from Angularjs application is tricky but BOSS is always right, if he don't want to see the # (hash) in URL then there is no way to keep it any more. Actually it is not too much work for anyone to set it up within 5 minute by rewriting the URL. I was playing and found it is very easy and useful. In all the supporting browsers it will show the url without hash and in older browsers which are not supporting HTML5 mode, it will show with #. Even if you will try to open a link without # in non-supporting browsers, it will automatically add it and open the page smoothly.

Before diving into the coding need to understand what it will support, so you can decide whether you need it or not

• I tested it only with UI-Router
• Supporting browsers will open without #
• Non-supporting browsers still show # in URL
• Page refresh works without any error of 404
• No coding need to do
• Just configuration will solve the problem

Much talked, let's start configuring, open the app.js or whatever the name you are using and add

$locationProvider.html5Mode(true);

//Here is the complete file
angular.module('myapp', ['ui.router'])
  .config([......., '$locationProvider', 
    function (......., $locationProvider) {    
       $locationProvider.html5Mode(true);         
        .........
}]);

If you will run the application now, it will give error $location in HTML5 mode requires a tag to be present!

So let's add the base, open index.html page and in head section add

<base href="/">

Now run the application, everything will work smooth, if your browser support html 5 mode then you can see the pages without any # in URL. If you finished playing then use the refresh button or copy the user and try to open the same URL in a new tab, and immediately it will start showing 404, page not found.

Now copy the following lines and add in web.config file

<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>

If you application giving access permission error it means you have not install URL Rewrite, go ahead and install it. every thing will be fixed.

There is not step to do, but let me clarify some basic things.

If you have created virtual directory in IIS with name say Html5Routing and running application from IIS then you need to do the base url changes in two places, one in index.html page and other in web.config like this

// Index.html
<base href="/Html5Routing/">

// web.config
<action type="Rewrite" url="/Html5Routing/" />

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 20,837

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 57,508

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 19,499

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 4,471

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 31,236