Load multiple Angular projects from Spring boot

Question

I have a Spring boot application and I have two completely independent angular projects. One project for the end user and another project for the admin. For business reasons, I am forced to have both of them as two different projects. I want both these projects to be packaged into the same WAR and when the user hits the URL for the end user, the end user angular application should be loaded and when the admin URL is accessed, the admin angular project should be loaded.

I know that Spring boot loads the angular project from /public or /static directories. However, since in my case, I have two different projects, I cant put them under the same folder since both of them have many file names in common including index.html.

So far, I have done the following:

1. Created two different folders under "public" as "enduser" and "manage" .

2. Created a controller which has two methods :

    @Controller public class SampleController { @RequestMapping(method = RequestMethod.GET, produces = "text/html", value = "/enduser") public String enduser() { return "/enduser/index.html"; } @RequestMapping(method = RequestMethod.GET, produces = "text/html", value = "/admin") public String admin() { return "/admin/index.html"; } } 

However, when I do like this only the index.html file is loaded and the other components are not loaded(by which I mean the entire angular project is not loaded). So the dependent views and styles etc are not loaded.

Does anybody have an idea on how to handle the above scenario? Thanks.

Answer 1

Resolved it the following way:

Created an MVC controller, added two different methods for each URL pattern.Copied the dist files of each project into aa separate folder under static folder.Added a different tag to each project.This way your angular project wont work on grunt serve.So you will have to set url as empty when you run on grunt serve and set it to a value only when you run for build.

Answer 2

Just posting the solution below it might help somebody else.

I am using two different folder where I am placing the contents of dist folder from angular source code. I have two different angular based applications admin and public.

Locations in spring app where I am placing the compiled angular code is as:

/src/main/resources/admin-app/*

(admin-index.html and other static files from admin angluar project)

/src/main/resources/static/*

(index.html and other static files from public angluar project)

Spring boot config

@EnableAutoConfiguration
public class AddCustomLocations {
    @Bean
    WebMvcConfigurer configurer () {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addResourceHandlers (ResourceHandlerRegistry registry) {
                registry.addResourceHandler("/pages/**").
                          addResourceLocations("classpath:/admin-app/");
            }
        };
    }

That's it now when you will hit http://localhost:8080 . It will load the public angular app. And when you will hit Now when I am trying to open http://localhost:8080/pages/admin-index.html It will load the admin angular app.

The magic is all files inside static folder will work by default but if we want to create another folder for placing our static files. We will have to notify the spring boot app. You can also create a sub folder inside the static folder.

public & admin-app

You will have to hit the url like this

localhost:8080/public/index.html localhost:8080/public/admin-index.html

You will not need to create the above spring configuration for this.