How to remove # from URL , SpringBoot & AngularJs application?

Question

This is my TuckeyRewriteFilter filter class

public class TuckeyRewriteFilter extends org.tuckey.web.filters.urlrewrite.UrlRewriteFilter {

    @Override
    protected void loadUrlRewriter(FilterConfig filterConfig) throws ServletException {
        String confPath = filterConfig.getInitParameter("confPath");
        ServletContext context = filterConfig.getServletContext();
        try {
            final URL confUrl = getClass().getClassLoader().getResource(confPath);
            final InputStream config = getClass().getClassLoader().getResourceAsStream(confPath);
            Conf conf = new Conf(context, config, confPath, confUrl.toString(), false);
            checkConf(conf);
        } catch (Throwable e) {
            throw new ServletException(e);
        }
    }

}

This is my springboot main class

public class AdminWebApplication {

    public static final String REWRITE_FILTER_NAME = "rewriteFilter";
    public static final String REWRITE_FILTER_CONF_PATH = "urlrewrite.xml";

    @Autowired
    ApplicationContext applicationContext;

    public static void main(String[] args) {
        SpringApplication.run(AdminWebApplication.class, args);
    }

    @Bean
    public ObjectMapper createObjectMapper() {
        ObjectMapper objectMapper = new ObjectMapper();
        applicationContext.getAutowireCapableBeanFactory().autowireBean(objectMapper);
        return objectMapper;
    }

    @Bean
    public FilterRegistrationBean rewriteFilterConfig() {
        FilterRegistrationBean reg = new FilterRegistrationBean();
        reg.setName(REWRITE_FILTER_NAME);
        reg.setFilter(new TuckeyRewriteFilter());
        reg.addInitParameter("confPath", REWRITE_FILTER_CONF_PATH);
        reg.addInitParameter("confReloadCheckInterval", "-1");
        reg.addInitParameter("statusPath", "/redirect");
        reg.addInitParameter("statusEnabledOnHosts", "*");
        reg.addInitParameter("logLevel", "WARN");
        return reg;
    }
}

This is my urlrewrite.xml this file is from resources folder configuration is works fine, loading login page, but still I have to pass /#login, then it redirect to /login URL, but on browser refresh I ma getting 404 error. index.html, I have added , I don't want extra domain name after my port id.

<urlrewrite default-match-type="wildcard">
    <rule>
        <from>/login</from>
        <to>/login.html</to>//As of now only configured for login page.
    </rule>
    <rule>
        <from>/contact</from>
        <to>/index.html</to>
    </rule>
</urlrewrite>

The part after the # doesn't make it to the server and is what angular uses internally for routing. You are trying to solve a client-side issue on the server-side that isn't going to work. — M. Deinum
– M. Deinum, Commented Jun 10, 2018 at 7:22

Shashank Vivek · Accepted Answer · 2018-06-09 19:50:03Z

1

In your js router file (config phase) you need to add:

$locationProvider.hashPrefix(''); 
$locationProvider.html5Mode(true);

and in your index.html file, you need to add:

<base href="/">

Update 1

After implementing above on client side, you need to configure url mapping on server side as well. With # , the server ignores whatever is followed after it.

http://localhost:8080/#i_will_be_ignored/and_so_do_i

So, when you configure angularjs to remove # from URLs, your above request

http://localhost:8080/i_will_be_ignored/and_so_do_i

will now hit server with @path('i_will_be_ignored') . Now, that will give you 404 because you never mapped any API for it. Thats the reason, you are getting 404 on page refresh.

You need to map all the URLs that doesn't match to index.html followed by the unmatched url. Once that's done, angularjs will take it from there and redirects to appropriate route . I hope this will help you.

Something like this will help you out here

edited Jun 9, 2018 at 19:50

answered Jun 9, 2018 at 19:33

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user6006387 Over a year ago

It still I have to enter '#' in url prefix, after adding hashPrefix set to blank.

Shashank Vivek Over a year ago

do you mean ur angular still routes with # ?

user6006387 Over a year ago

no, it doesnt route to '#' but I have to enter '#' in the URL and then it will redirect to the same page by removing '#' symbol.

Shashank Vivek Over a year ago

and where are you "entering" # in the url ? in the xml file of spring\ ?

user6006387 Over a year ago

I have to type in browser URL '#'. for example if i have to access my login page then localhost:8080/#/login > on enter hit it will redirect to localhost:8080/login and if I directly try to access localhost:8080/login, this is breaking app to 404 error

|

Collectives™ on Stack Overflow

How to remove # from URL , SpringBoot & AngularJs application?

1 Answer 1

Update 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related