AngularJS: Page reload fails when using Angular Ui Router with Html5 mode enabled [duplicate]

Question

I am using Angular UI Router in my angular app and i have enabled HTML5 mode to remove # form my URL's by using $locationProvider in the config.

angular.module('myApp', ['ui.router'])
 .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
       .state('home', {
            url: '/',
            templateUrl: 'views/home.html',
            controller:'HomeController'
        })
        .state('about', {
            url: '/about',
            templateUrl: 'views/about.html',
            controller:''
       })
       .state('skills', {
            url: '/skills',
            templateUrl: 'views/skills.html',
            controller: ''
       })
       .state('projects', {
            url: '/projects',
            templateUrl: 'views/projects.html',
            controller: 'ProjectsController'
       })
       .state('contact', {
            url: '/contact',
            templateUrl: 'views/contact.html',
            controller: ''
       });
    $locationProvider.html5Mode(true);
});

I have also set the

<base href="/">

tag in the index.html file as well. The routing works fine and i can navigate to pages and the # is removed but when i refresh the page using the reload button on the browser I get a 404 error page.

I'm using Webstorm IDE for my development. Can someone provide me a solution for this?

Answer 1

By enabling HTML5 mode your url hash # becomes hashbang #! then it returns url without hashbang on the browser. So even though the url on browser is something like

http://www.example.com/about

the actual hashbang url is something like this.

http://www.example.com/#!/about

Try to changed your htaccess file according to this. it should be located public directory where your index.html is located, if you are using apache.

RewriteEngine On  
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html