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, Jun 10 '18 at 07:22

Shashank Vivek · Answer 1 · 2018-06-09T19:50:03.237

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 09 '18 at 19:50

answered Jun 09 '18 at 19:33

Shashank Vivek

16,888
8
62
104

It still I have to enter '#' in url prefix, after adding hashPrefix set to blank. – Jun 09 '18 at 19:38
do you mean ur angular still routes with `#` ? – Shashank Vivek Jun 09 '18 at 19:39
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. – Jun 09 '18 at 19:40
and where are you "entering" `#` in the url ? in the `xml` file of spring\ ? – Shashank Vivek Jun 09 '18 at 19:42
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 – Jun 09 '18 at 19:44
I redirected as of now login page to index.html, as you suggested. still on refresh it is 404 error http://localhost:8888/#login http://localhost:8888/#/login /index.html – Jun 11 '18 at 18:50
@Dnyaneshwar : You should remove the hash from the url mapping now, as u have implemented `$locationProvider.hashPrefix` in angularjs – Shashank Vivek Jun 12 '18 at 03:13
Thank for your great support. this works for me !. thanks alot. I have redirected all my URLs through index.html, – Jun 13 '18 at 10:03
How can I put rule inside urlrewrite.xml for URL having dynamic parameters ? For e.g. localhost:8080/sample/getstudentbyid/101 – Jun 13 '18 at 10:16
@Dnyaneshwar : I'll have to check, check regex – Shashank Vivek Jun 13 '18 at 11:23

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

1 Answers1

Update 1