Spring Boot/Angular 4 - Routing in app hits the server

Question

I have an Angular 4 (ES6) app that I want to serve from a Spring Boot application. My Angular app has an index.html, and when the address of http://localhost:8080 is hit, Spring Boot knows to map to the index.html file which in Angular is mapped to "/search".

However, I have another route called "adminlogin" which I would access through

http://localhost:8080/adminLogin

But in this instance, it hits my Spring Boot application, which doesn't have a mapping and then it throws an error.

How do I get my address of http://localhost:8080/adminLogin to go to my Angular app?

Answer 1

I had the similar issue with my SpringBoot 2 and Angular6 app. I implemented the WebMvcConfigurer interface to override addResourceHandlers() method and redirect to index.html when there were no mappings found in spring controllers. this can be done in Spring boot 1.5.x extending the (now deprecated) WebMvcConfigurerAdaptor class. this is discussed in details in this stackoverflow thread: https://stackoverflow.com/a/46854105/2958428 I put my built angular app in this location target/classes/static using the outputPath field in angular.json (previously .angular-cli.json). Here's the sample code:

@Configuration
public class MyAppWebMvcConfigurer implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**/*")
            .addResourceLocations("classpath:/static/")
            .resourceChain(true)
            .addResolver(new PathResourceResolver() {
                @Override
                protected Resource getResource(String resourcePath, Resource location) throws IOException {
                    Resource requestedResource = location.createRelative(resourcePath);
                    return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/static/index.html");
                }
            });
    }
}

Answer 2

Im my case, I created a simple view controller using ViewControllerRegistry for every Angular route, redirecting to "/".

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        List<String> urlPatterns = List.of(
                "/login",
                "/app-home",
                "/another_route"
        );

        urlPatterns.forEach(pattern -> registry.addViewController(pattern).setViewName("forward:/"));
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
    }
}

Answer 3

Since the path adminlogin was not mapped in any of the spring controller spring application dispatch the request to /error, Hence you are getting the error page.

You need to route it back to angular so that the adminlogin page will be routed by Angular.

Following the simple route to do so.

@Controller
public class RouteToAngular implements ErrorController {

    @RequestMapping("/error")
    public String handleError() {
        return "/";
    }

    @Override
    public String getErrorPath() {
        return "/error";
    }
}

Note: Don't forget to implement the 404 page in Angular.

I hope this will be help.

Answer 4

I couldn't get the root URL to work without doing this silliness.

@EnableWebMvc
@Configuration
public class MvcConfiguration implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/")
                .addResourceLocations("classpath:/static/")
                .resourceChain(true)
                .addResolver(new PathResourceResolver() {
                    @Override
                    protected Resource getResource(String resourcePath, Resource location) throws IOException {
                        Resource requestedResource = location.createRelative(resourcePath);
                        
                        return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                                : new ClassPathResource("/static/index.html");
                    }
                });

        registry.addResourceHandler("/**/*")
                .addResourceLocations("classpath:/static/")
                .resourceChain(true)
                .addResolver(new PathResourceResolver() {
                    @Override
                    protected Resource getResource(String resourcePath, Resource location) throws IOException {
                        Resource requestedResource = location.createRelative(resourcePath);
                        
                        return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                                : new ClassPathResource("/static/index.html");
                    }
                });
    }
}