current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

This question already has an answer here:

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?

share|improve this question

marked as duplicate by Rob, TylerH, Phil javascript Jul 6 at 1:55

This question was marked as an exact duplicate of an existing question.
up vote 0 down vote

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
share|improve this answer
    
Where can i find this .htaccess file or where do I need to create it? – Ashwath S H Jul 6 at 4:38
    
Your public directory where your index.html is located? You might need to view hidden files – Milo Kang Jul 6 at 11:39
    
I wrote the above thing in .htaccess file and hosted it on the server along with index.html, but it is giving me 500 Internal Server Error now. My application itself is not loading. – Ashwath S H Jul 12 at 19:09
    
Please take a look at following link. github.com/angular-ui/ui-router/wiki/… – Milo Kang Jul 14 at 16:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.