BASE tag with locationProvider AngularJS

My English is not very good, but i try to explain my self clear. I'm trying to optimize Website based on pure Angular to SEO. Here is the link http://www.sanjosejumpstart.com/tests/project/ When you come first time to the website and start clicking on the links, routing is working fine, but when refreshing the page, i get error with

Not Found

The requested URL /tests/project/automotive was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

i can't understand why this happens.(may be because a hash is disappeared?)

Some body have any idea how i can fix that?

BASE tag on index html looks 

 <base href="http://www.sanjosejumpstart.com/tests/project/">

and route config look likes: 

.config(['$httpProvider', '$stateProvider', '$urlRouterProvider',   '$locationProvider', 
 function($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {

$httpProvider.defaults.transformRequest.push(LockJS.postConvert);
                                $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
$httpProvider.interceptors.push('Interseptor');

 /* activating html5 mode */
 $locationProvider.hashPrefix('!');
 $locationProvider.html5Mode(true);

 $urlRouterProvider.otherwise('/home');
 $stateProvider
   .state('home', {
     url: '/home',
      views: {
       '': { 
         templateUrl: 'templates/main-page-content.html' 
       },
       'article@home': {
          templateUrl: 'templates/main-page/app-main-article.html',
          controller: 'MainArticleCtrl'
        },
        'services@home': {
           templateUrl: 'templates/main-page/app-main-services-list.html',
           controller: 'MainServicesCtrl'
        },
        'services-info@home': {
            templateUrl: 'templates/main-page/app-services-info.html',
            controller: 'MainServicesInfoCtrl'
        },
        'aside@home': {
           templateUrl: 'templates/main-page/app-aside-content.html'
        },
        'middle-slider@home': {
           templateUrl: 'templates/main-page/app-middle-slider.html'
        },
        'map@home': {
           templateUrl: 'templates/main-page/app-map.html'
        }
      }  
    })
    .state('automotive', {
       url: '/automotive',
       views: {
         '': {
           template: '<h1>automotive view</h1>'
         }
       }
    })

  }])

And then comes more states. Thank you for any advice.

You need to set up your server to return your index.html page for all requests that are not:

  • an API call (have these all start with /api to make this easier)
  • a static file request (have these all start with /pub or similar)

Then the index.html will load, Angular will bootstrap your app, which will involve examining the route and loading the correct page.

Why should I use /api or /pub?

The exact prefix is not super important (though it should make sense). What is helpful is that by using a common prefix for all API endpoints (e.g. routes you call using the $http or $resource services), you will not overlap with any client-side routes in your app.

For example, if you didn't follow this rule, say you had the following server side route configured:

  • /products - gets a list of products as JSON

Then you had a client-side route set up as: /products, it becomes a bit confusing as to which one you meant when you type in www.myserver.com/products.

Technically, if the server is configured correctly it could tell the difference between an AJAX request to /products asking for JSON and a "normal" HTTP GET request to /products. But it is still not ideal, because you can't tell from the URL alone which one you meant. You have to look at how it was called as well.

Alternative: Give up on HTML5 mode

If you can't configure the server like I said above, you will need to disable HTML5Mode. That way, all the relative URLs will be after the #, so the only file request the web server ever gets is for the default page for /test/project.

i found the solution, you can see all redirects now:

http://www.sanjosejumpstart.com/tests/project/home

here is the solution:

Apache server

1) index must be php, not html - index.php

2) adding BASE tag in head of the file like this = <base href="/tests/project/">

3) in app config - $locationProvider.html5Mode(true)

no need to add $locationProvider.hashPrefix('!');

and finally .htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /Locksmith-Project/project/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)       index.php/#/$1 
</IfModule>

Hope it is be helpful to someone