Category Archives: angular-providers

Angular $routeProvider.html5Mode route crashes after manual refresh

After enabling $locationProvider.html5Mode(true); and <base href="/" /> in the index.html routes began crashes after manual reload.

Looking up for solutions I found that .htaccess rules will fix this problem, but different configurations didn't help.

Maybe this is because my index.html is in the subdirectory /views/index.html

.htaccess:

Options +FollowSymLinks

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L] # /views/index.html doesn't work as well
</ifModule>

route config

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'AddTaskCtrl',
            controllerAs: 'AddTask'
        })
        .when('/chat', { //this route breaks on manual refresh  
            templateUrl: 'chat.html',
            controller: 'ChatCtrl',
            controllerAs: 'chat'
        })
}]);