Introduction

Here in this tutorial I am going to show you how to redirect to context path for 404 error in Angular Spring Boot application. Context path basically is the same path for home page or root URL.

It is assumed that your frontend application is built using Angular and backend application is built using Spring Boot framework. Spring Boot application generally exposes REST APIs and those REST APIs are protected using authentication.

When does 404 error occur?

Probably you are using Okta API to authenticate and authorize your application users and when your enter credentials in Okta login page and end users see 404 error while redirected to the home page or dashboard page URL. For example, the following page shows redirection to the login page of Okta SSO from my application.

The 404 error (Page Not Found) basically occurs when something gets appended to the URL after user is successfully authenticated using Okta login page.

Now this Page Not Found or 404 error does not occur in your local development environment, provided that you have setup wildcard route ({path: ‘**’, redirectTo: ‘home’, pathMatch: ‘full’}) in your routing module typescript.

Though you have setup wildcard routing in your Angular application, but this does not seem to be working in the production or non-local environments. And you are getting the following error:

You may also want to read how to show custom error page in Spring Boot application.

Solution

There are many solutions you will find online when you search in Google. But here I am going to create a filter that will redirect to the home page of the application instead of showing such default ugly 404 error (Whitelabel Error Page).

import org.springframework.stereotype.Component;
 
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
 
@Component
public class UrlForwardFilter implements Filter {
 
    private final String REST_API_PATTERN = "^\\/roytuts\\/(.+)$";
    private final String POINT_EXCLUSION_PATTERN = "^([^.]+)$";
 
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest servletRequest = (HttpServletRequest) request;
        String requestURI = servletRequest.getRequestURI();
        String contextPath = servletRequest.getContextPath();
                            
        if(!requestURI.equals(contextPath) && !requestURI.matches(API_PATTERN) && requestURI.matches(POINT_EXCLUSION_PATTERN)) {
            RequestDispatcher dispatcher = request.getRequestDispatcher("/");
            dispatcher.forward(request, response);
            return;
        }
                            
        chain.doFilter(request, response);
    }
 
}

The above filter is invoked for each request from the client. It checks forwards to the root URL or empty context path if the request does not contain /roytuts/ and . and the request is not equal to the context path itself. The /roytuts/ is the prefix of your REST APIs built using Spring Boot application.

So, for 404 error in the above image, the URL has the null value in the end, so this filter will forward the request to the home page or /. Therefore you won’t see 404 (page not found) error.

If you have more filters in your project apart from the above one, this will just work fine without any problem.

Hope it helps to solve your 404 error problem in your Angular and Spring Boot project.