Angular JS deep linking $routeProvider reload not working

Question

I have the following config for routes:

app.config( function ($routeProvider, $locationProvider, $httpProvider) {

// Routes
$routeProvider.when('/admin', {
    templateUrl : '/app/partials/dashboard.html',
    controller  : 'DashboardCtrl'
});
$routeProvider.when('/admin/settings', {
    templateUrl : '/app/partials/settings.html',
    controller  : 'SettingsCtrl'
});
$routeProvider.when('/404', {
    templateUrl : '/app/partials/404.html',
});
$routeProvider.otherwise({redirectTo: '/404'});

$locationProvider.html5Mode(true);
});

Everything is working except, when I'm on /admin/settings and reload the page, it redirects to 404. I tried removing the html5Mode, it works. However, I really want to use html5Mode. What am I missing? Please help me.

Oh, btw, I'm using AngularJS 1.1.5.

Answer 1

I had a very similar error and solved it by inserting <base href='my_app_base_url'></base> into my index.html page, in the head. The idea came from this GitHub issue (https://github.com/angular/angular.js/issues/2774) and this other one (https://github.com/angular/angular.js/issues/2868), as well as the one I mentioned in my comment.

Answer 2

try $location.path('/404').replace();