Spring Mvc and Angular2 run on Tomcat server

Question

I want to have index.html from an Angular 2 project to run as a welcome page of a Spring MVC application. We can't use maven project, just create spring MVC project.

I have tried copy angular dist folder into web directory,

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>

This is my folder structure,

I got HTTP Status 404 -Error

Can any only help me

Thanks in advance!!!

Answer 1

There are two things that you need to take care of

FIRST - You need to keep your angular artifacts outside of the WEB-INF directory. You should copy the contents of you dist folder directly to your web directory.

Ref - JSP in /WEB-INF returns "HTTP Status 404 The requested resource is not available" for more details.

SECOND - Your index.html should contain correct base href not just default "/". Your base href should be

<base href="/myUrl/">

where myUrl is your web application context.

You can either manually modify the base href in you index.html or you can provide it while building your angular app like this.

ng build --base-href /myUrl/

Ref - Set base href dynamically - Angular 2 / 4 / 5 for more details.

UPDATE

If you really want to keep your angular artifacts in /web/dist directory then

your web.xml should have following

<welcome-file-list>
    <welcome-file>dist/index.html</welcome-file>
</welcome-file-list>

and your index.html should contain

<base href="/myUrl/dist/">

and you should define an endpoint

@GetMapping("/dist")
public void forward(HttpServletResponse response) throws IOException {
    response.sendRedirect("/myUrl/dist/index.html");
}

Then you can access your angular application with any of the following urls

http://host:port/myUrl
http://host:port/myUrl/dist
http://host:port/myUrl/dist/index.html

and reload will also not cause any problem.

UPDATE - 2

The above endpoint may not be able to reload the html5 angular routes url. So instead of the above endpoint you can apply this below filter which will be able to handle the reloads.

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http.
             ....
             .addFilterAfter(new OncePerRequestFilter() {
                   // add the values you want to redirect for
                   private Pattern patt = Pattern.compile("/dist/.*");

                   @Override
                   protected void doFilterInternal(HttpServletRequest request, 
                                                   HttpServletResponse response, 
                                                   FilterChain filterChain)
                                    throws ServletException, IOException {
                        if(this.patt.matcher(request.getRequestURI()).matches()) {
                            RequestDispatcher rd = request.getRequestDispatcher("/dist/index.html");
                            rd.forward(request, response);
                        } else {
                            filterChain.doFilter(request, response);
                        }
                 }
        }, FilterSecurityInterceptor.class)
        .... 

Ref - https://github.com/spring-guides/tut-spring-security-and-angular-js/issues/68#issuecomment-187675742 for more details.