6

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,

enter image description here

I got HTTP Status 404 -Error

Can any only help me

Thanks in advance!!!

Jan Nielsen
  • 10,892
  • 14
  • 65
  • 119
Robert
  • 3,373
  • 1
  • 18
  • 34

1 Answers1

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.

vsoni
  • 2,828
  • 9
  • 13
  • Then, I am afraid, you will have to copy the contents of dist folder to your web directory. I'll update my answer accordingly. – vsoni Jan 17 '18 at 07:31
  • @Robert - This is because when you load home page `http://host:port/myUrl` the url becomes `http://host:port/myUrl/dist/` and when you do browser reload it does't find anything on this url. So, its better to copy the contents from dist to web directory. – vsoni Jan 17 '18 at 07:42
  • @Robert - And, if you hit the url `http://host:port/myUrl/dist/index.html` it'll load the page but url again becomes `http://host:port/myUrl/dist/` because of base url set in the page. So, its better to copy the contents from dist to web directory rather than the whole dist directory. – vsoni Jan 17 '18 at 07:50
  • @Robert - If you really want to keep your angular artifacts in `/web/dist` directory then see my updated answer. – vsoni Jan 19 '18 at 07:29