Render multiple Angular applications in Springboot

I have a Nx workspace with multiple Angular applications. Each Angular application should be served from a Springboot application. For example. Each app will be accessible from a sub-path like below.

localhost:8080/app1/

localhost:8080/app2/


So far this works. The challenge now is handling a page refresh for when the path is for example localhost:8080/app1/account. I want to redirect the request to account to localhost/app1/index.html.

The built Angular apps are in the static folder/springboot class path. I have changed the outputDir for each Angular project to output to classpath:/static/apps/.

This is all fine.

I have implemented SecurityFilterChain beans for both the apps.

@Configuration
public class StaticResourceSecurityConfig {
@Bean
@Order(1)
public SecurityFilterChain app1(HttpSecurity http) throws Exception {
return staticPermitAll(http, "/app1/**");
}

@Bean
@Order(2)
public SecurityFilterChain app2(HttpSecurity http) throws Exception {
return staticPermitAll(http, "/app2/**");
}

private SecurityFilterChain staticPermitAll(HttpSecurity http, String pattern) throws Exception {
http
.securityMatcher(pattern)
.authorizeHttpRequests(auth -> auth.anyRequest().permitAll());
return http.build();
}

}


I have also a controller that handles the requests to the apps

@Controller
public class FrontEndRoutingController {
@GetMapping({"/app1/", "/app2"})
public String redirectToAngularApp(HttpServletRequest request) {
String uri = request.getRequestURI();

if (uri.startsWith("/app1/")) {
return "forward:/app1/index.html";
} else if (uri.startsWith("/app2/")) {
return "forward:/app2/index.html";
}

return "forward:/"; // fallback
}
}


The rendering works and the routing works when navigating through the app (Angular router). However when I navigate to router like: localhost:8080/app1/account and hit page refresh. I get an error that the resource is not found. So I want redirect to /app1/index.html.

I tried tweaking the GET mapping paths to use wildcards so that when the path is for example /app1/account **

the request must be forwarded to /app1/index.html


**. However with the following change, I get an infinite loop because the forwarded request is being caught again by the controller, creating a cycle.

@Controller
public class FrontEndRoutingController {
@GetMapping({"/app1/**", "/app2/**"})
public String redirectToAngularApp(HttpServletRequest request) {
String uri = request.getRequestURI();

if (uri.startsWith("/app1/")) {
return "forward:/app1/index.html";
} else if (uri.startsWith("/app2/")) {
return "forward:/app2/index.html";
}

return "forward:/"; // fallback
}
}


How can I handle this case, what's the other way can I achieve this multiple apps serving.

Using the WebMvcConfigurer also did not work because it requires the index.html file be specified explicitly on the URL for it to work and that's not what I want. So the following is not an option unless we can have it not to require the file (index.html) specified on the URL like /app1/index.html, so /app1/ does not work with the following.

@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/app1/**")
.addResourceLocations("classpath:/static/app1`enter code here`/");
}
}

Continue reading...