Page reload fails when using Angular Ui Router with Html5 mode enabled

Question

I am using Angular UI Router in my angular app and i have enabled HTML5 mode to remove the # form the URL by using $locationProvider in the config.

Answer 1

Cant explain in details why this happening but I can describe you a way i solved out this problem. So i used UrlRewriterFilter for my SpringMvc backend. Angular general module config :

var app = angular.module('ilonaChatGeneralModule', 
    [
        'ui.router'
    ]);

app.config(function($locationProvider){
    $locationProvider.html5Mode(true);
});

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    var home = ['/', {
        url: '/',
        templateUrl: 'views/userlist.html'
    }];

    var login = ['login', {
        url: '/login',
        templateUrl: 'views/login.html'
    }];

    var privateRoom = ['privateroom', {
        url: '/privateroom',
        templateUrl: 'views/privateroom.html'
    }];

    $stateProvider
        .state(home)
        .state(login)
        .state(privateRoom)
        ;
});

My home page, index.html:

    
    ...




    

This is frontend. For backend I used UrlRewriteFilter, you can get it with following maven dependency:

  
        org.tuckey
        urlrewritefilter
        4.0.3
    

I've added it to my SpringMVC WebAppInitializer in next way:

    package com.sbk.config;

    import org.springframework.context.ApplicationContext;
    import org.springframework.web.context.ContextLoaderListener;
    import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
    import org.springframework.web.filter.CharacterEncodingFilter;
    import org.springframework.web.servlet.DispatcherServlet;
    import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
    import org.tuckey.web.filters.urlrewrite.UrlRewriteFilter;

    import javax.servlet.*;
    import java.nio.charset.StandardCharsets;
    import java.util.EnumSet;

    public class WebAppInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {   
        private static final String URL_REWRITE_FILTER_NAME = "urlRewrite";
        private static final String URL_REWRITE_FILTER_MAPPING = "/*";

...
        @Override
        public void onStartup(ServletContext servletContext) throws ServletException {
            super.onStartup(servletContext);

            FilterRegistration.Dynamic urlReWrite = servletContext.addFilter(URL_REWRITE_FILTER_NAME, new UrlRewriteFilter());
            EnumSet urlReWriteDispatcherTypes = EnumSet.of(DispatcherType.REQUEST, DispatcherType.FORWARD);
            urlReWrite.addMappingForUrlPatterns(urlReWriteDispatcherTypes, true, URL_REWRITE_FILTER_MAPPING);
        }
    }

This filter requires urlrewrite.xml file under ur WEB-INF directory(seems like in configurable but default place - here). Content of this file:

    
        /login$
        index.html
    

    
        /privateroom$
        index.html
    

I didn't read manuals carefully but i suspect that idea is when you refresh ur browser with http://yourhost:xxxx/privateroom ur app try to find physicaly existing view http://yourhost:xxxx/privateroom. But its absent. And when you redirect it to ur base page angular would built correct link to physical file using its states definition. I can mistake in theory but it works in practice