Spring Boot + Angular2 on same server

Question

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.

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
– JB Nizet, Commented May 29, 2017 at 16:17
Have you seen github.com/spring-guides/tut-spring-security-and-angular-js/…? — EpicPandaForce
– EpicPandaForce, Commented May 29, 2017 at 16:34
@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
– Sleeper9, Commented May 30, 2017 at 7:38

Sleeper9 · Accepted Answer · 2019-12-03 14:51:40Z

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";
}

edited Dec 3, 2019 at 14:51

answered Jun 1, 2017 at 12:56

Sleeper9

1,7791 gold badge19 silver badges28 bronze badges

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

1 Comment

cjnygard Over a year ago

I think you have an extra '[' before the 'path:' bit.

sercasti · Accepted Answer · 2017-05-29 16:24:48Z

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)

edited May 29, 2017 at 16:24

answered May 29, 2017 at 16:17

sercasti

6004 silver badges7 bronze badges

1 Comment

Sleeper9 Over a year ago

Please see my edited question, I hope it's a bit clearer now, what my real problem is. :)

Filipe Mendes · Accepted Answer · 2017-07-22 06:33:04Z

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.

answered Jul 22, 2017 at 6:33

Filipe Mendes

1859 bronze badges

Collectives™ on Stack Overflow

Spring Boot + Angular2 on same server

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related