Angular html5 mode and Spring routing

Question

I'm having an issue using angular html5 mode for routing with a spring boot backend. The application works fine when I use ui router's $state.go() to navigate to different url's, but when I attempt to enter a different state's url and go directly to it, it fails to load properly.

We used a solution similar to what is detailed here (https://spring.io/guides/tutorials/spring-security-and-angular-js/), essentially using a spring controller to forward certain pages to the base url, "/". The difference with ours is that we use a base url, 'step', to put before every page but the home page. When we do navigate directly to a different page in our site, however, every resource that is loaded is turned into our index.html file (js, css, etc.). When we look at the network requests, it's appended the 'step' url in front of every request for some reason (so instead of css/style.css, it would be step/css/style.css).

Here's an example of our spring controller:

@Controller
public class ViewController {
    @RequestMapping(value="/step/**")
    public String forward() {
        return "forward:/";
    }
}

Any help would be appreciated, but keep in mind we have looked into various solutions already such as the link mentioned and several others which have similar solutions.

jonas · Accepted Answer · 2017-07-04 14:54:57Z

1

In combination with thread and this source we finally got it working. In our case there aren't any subpages. Maybe it helps someone:

@RequestMapping(value = "/**/{id:[^\\.]*}")
public String html5Forwarding() {
    return "forward:/index.html";
}

The /**/ in the beginning helps to map nested resources to this method.

answered Jul 4, 2017 at 14:54

jonas

1952 silver badges8 bronze badges

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

Comments

Gabriel Kohen · Accepted Answer · 2015-09-24 21:01:02Z

0

Try returning where you want to map it to rather than forward:

@Controller
public class MainViewController {

    @RequestMapping("/")
    public String indexPage() {
        return "index";
    }

    @RequestMapping("/application/**")
    public String apppplicationContext() {
        return "index";
    }
}

answered Sep 24, 2015 at 21:01

Gabriel Kohen

4,3264 gold badges34 silver badges47 bronze badges

1 Comment

Craig Over a year ago

Can you elaborate on this? I've tried using "/**/, but I end up in an infinite loop where I return "index", then the controller is called again with "/WEB-INF/views/index.html", which just keeps getting called over and over. Is there some way that I can have a controller with "/**" that excludes anything that starts with "/WEB-INF"? Do I have to stick everything in a "/application"?

Mr Lister · Accepted Answer · 2015-12-22 15:57:56Z

Late answer, anyway I stumble over the same issue, in exactly the same context as you, with the resource files having a wrong url when reloading the page on a URL mapped to some prefix in the Spring controller:

@RequestMapping(value = "/hello/{id:[\\w-]+}")
public String forwardHello() {
    return "forward:/index.html";
}

My issue was that in the index.html file I had:

<head>    
<link rel='stylesheet' href='webjars/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='webjars/bootstrap/3.3.4/css/bootstrap.min.css'>
...
<base href="/my-app/" />
</head>

Everything worked fine as long as I was navigating once the index page loaded, but when refreshing a page from the hello context, e.g.:

http://example.com/my-app/hello/john

the browser was trying to load the resource files with an additional hello in the path, e.g.

http://example.com/my-app/hello/webjars/...

The solution is to put the <base href="/my-app/" /> first in the header to ensure that all linked resources are loaded from this base.

Quoting W3Schools:

Tip: Put the <base> tag as the first element inside the element, so that other elements in the head section uses the information from the element.

Collectives™ on Stack Overflow

Angular html5 mode and Spring routing

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest