Angular-UI-Router with Html5Mode refresh page issue

I have an app that uses angular-ui-router with html5mode(true). Everything seems to work fine when running and routing to other states.

My default state is app/calendar which is set during

But when i refresh the page while i’m currently in other routes(lets say app/profile) it takes me back to app/calendar.

Debugging i noticed that the $state.current is always empty after i refresh the page

Object {name: "", url: "^", views: null, abstract: true}

if only the $state.current has value i can just transistion to the current state.

Is there anything that i am missing?

Hopefully someone can help.

My server routing looks like

app.get('/:var(/|app/calendar|app/customers|app/profile|app/settings)?', function(req, res) {
    res.sendFile('/app/main/main.html',{ root: '../Appt/public' });

i’m always serving the same file.

and my front-end state configuration


            var calendar = {
                    name: 'calendar',
                    url: 'app/calendar',
                    controller: 'Appt.Main.CalendarController',
                    controllerAs: 'calendar',
                    templateUrl: '/app/main/calendar/calendar.html'
                customers = {
                    name: 'customers',
                    url: 'app/customers',
                    controller : 'Appt.Main.CustomersController',
                    controllerAs : 'customers',
                    templateUrl : '/app/main/customers/customers.html'
                profile = {
                    name: 'profile',
                    url: 'app/profile',
                    controller : 'Appt.Main.ProfileController',
                    controllerAs : 'profile',
                    templateUrl : '/app/main/profile/profile.html'
                settings = {
                    name: 'settings',
                    url: 'app/settings',
                    controller : 'Appt.Main.SettingsController',
                    controllerAs : 'settings',
                    templateUrl : '/app/main/settings/settings.html'





        'use strict';

            .run(['$state','$stateParams', function ($state,$stateParams) {
                console.log('Appt.Main is now running')




Source: html5

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.