CODEWITHSUNDEEP
javaspringangularspring-boot
Sleeper9
Sleeper9

Reputation: 1779

Spring Boot + Angular2 on same server

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.

Upvotes: 5

Views: 3806

Answers (3)

Sleeper9
Sleeper9

Reputation: 1779

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

Upvotes: 2

Filipe Mendes
Filipe Mendes

Reputation: 185

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.

Upvotes: 0

sercasti
sercasti

Reputation: 590

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)

Upvotes: 0

Related Questions