5

I'm successfully integrated my Angular2 application with Spring Boot backend following this tutorial, placing the compiled JS resources to a /ui subdirectory. Everything works fine basically, the Angular2 application is accessible through the appname/ui URL.

However, I'd like to know if there is a way to tell Spring to 'pass-through' URLs that children of the /ui path, as currently Spring intercepts every requests targeting /ui/*, preventing the Angular2 Router properly navigating to resources under the /ui path.

Currently, I only have this mapping in one of my controllers:

@RequestMapping(value = "/ui")
public String uiIndex() {
    return "/ui/index.html";
}

With this, the interface properly shows up at /ui, but Spring sends me errors and 404s for everything under it, when I address them directly from browser. Router navigation inside the Angular2 app works perfectly though.

EDIT

I'm adding the compiled Angular2 resources from target/ui to static/ui folder with this config (my project uses maven build):

        <resource>
            <directory>${project.basedir}/src/main/resources</directory>
            <includes>
                <include>*.properties</include>
                <include>templates/*.*</include>
            </includes>
        </resource>
        <resource>
            <directory>target/ui</directory>
            <targetPath>static/ui</targetPath>
        </resource>

As to be clear, the only problem is, when I enter an URL in the browser like /ui/home/settings, Spring intercepts the request and throws errors. I can happily navigate to /ui, and then to /home/settings in the Angular context though.

Sleeper9
  • 1,707
  • 1
  • 19
  • 26
  • The standard location for static resources in a Spring boot app is under src/main/resources/static. Just put your Angular resources there, and Spring Boot will serve them. – JB Nizet May 29 '17 at 16:17
  • You may want a mapping that ends with `/**`. – chrylis -cautiouslyoptimistic- May 29 '17 at 16:33
  • Have you seen https://github.com/spring-guides/tut-spring-security-and-angular-js/blob/master/modular/README.adoc? – EpicPandaForce May 29 '17 at 16:34
  • 1
    Also maybe https://stackoverflow.com/questions/40769200/configure-spring-boot-for-spa-frontend – EpicPandaForce May 29 '17 at 16:35
  • @EpicPandaForce yes, I think I need something like this, but it also seems a problem that my Angular resources don't reside under static/ but rather in static/ui. I tried using `@RequestMapping(value = "/{path:[^\\.]*}")` adding the _ui/_ fragment, but it does not seem to work. I'm still trying though... – Sleeper9 May 30 '17 at 07:38

3 Answers3

2

After some trial-and-error, I was finally manage to do what I wanted. Many thanks to @EpicPandaforce 's useful comment and this StackOverflow post

The final solution was to create a @RequestMapping in a @Controller like this:

@RequestMapping(value = "/ui/**/{path:[^\\.]*}")
public String redirectUi() {
    return "forward:/ui/index.html";
}
Sleeper9
  • 1,707
  • 1
  • 19
  • 26
0

You can add ResourceHandlers to configure static content serving in spring boot.

Example

@Configuration
public class StaticResourceConfiguration extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/ui").addResourceLocations("file:/path/to/your/angular/files");
    }
}

See https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-static-content

Now, Step 5 of the tutorial you mentioned has a cleaner way of doing this, did you skip that step? (src/main/resources/static)

sercasti
  • 550
  • 3
  • 7
0

I think that the most simple way to do what you want is using Angular Hash Location Strategy.

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

{ provide: LocationStrategy, useClass: HashLocationStrategy }

I hope to help.

Filipe Mendes
  • 155
  • 8