1

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?

Ashwath S H
  • 481
  • 1
  • 4
  • 13

1 Answers1

0

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
Milo Kang
  • 130
  • 8
  • Where can i find this .htaccess file or where do I need to create it? – Ashwath S H Jul 06 '16 at 04:38
  • Your public directory where your index.html is located? You might need to view hidden files – Milo Kang Jul 06 '16 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 '16 at 19:09
  • Please take a look at following link. https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode – Milo Kang Jul 14 '16 at 16:07