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!!!

2
  • change the base href to <base href="."> in index.html.Copy the dist folder in webapps of tomcat server and start the server and hit ip:port/dist/ Commented Jan 21, 2018 at 14:07
  • I have added some more updates to my answer. Commented Jan 24, 2018 at 20:31

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

4 Comments

Then, I am afraid, you will have to copy the contents of dist folder to your web directory. I'll update my answer accordingly.
@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.
@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.
@Robert - If you really want to keep your angular artifacts in /web/dist directory then see my updated answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.