Whitelabel Error Page with Angular + Springboot

Question

I'm getting a Whitelabel Error Page (error 404) whenever I try to load any page on my Angular 9 app (aside from the root route) by putting the url on the browser and pressing enter or refreshing the page. Loading these pages using the page buttons (Angular router) works perfectly.

I tried many solutions from stackoverflow to fix this but none worked.

whitelabel error page

Backend Main Class

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class GroupsApplication {

    public static void main(String[] args) {
        SpringApplication.run(WarcraftgroupsApplication.class, args);
    }

}

Backend SecutiryConfigurer

import com.sampaiodias.groups.auth.filters.JwtRequestFilter;
import com.sampaiodias.groups.auth.services.MyUserDetailsService;
import org.springframework.context.annotation.Bean;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.crypto.password.NoOpPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;

@EnableWebSecurity
public class SecurityConfigurer extends WebSecurityConfigurerAdapter {

    private final MyUserDetailsService myUserDetailsService;
    private final JwtRequestFilter jwtRequestFilter;

    public SecurityConfigurer(MyUserDetailsService myUserDetailsService, JwtRequestFilter jwtRequestFilter) {
        this.myUserDetailsService = myUserDetailsService;
        this.jwtRequestFilter = jwtRequestFilter;
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(myUserDetailsService);
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable().authorizeRequests().antMatchers("/auth", "/user", "/refresh", "/end-session").permitAll()
                .and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
        http.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return NoOpPasswordEncoder.getInstance();
    }

    @Bean
    @Override
    public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }
}

Frontend AppRoutingModule

import { GroupsComponent } from './groups/groups/groups.component';
import { RegisterComponent } from './auth/register/register.component';
import { LoginComponent } from './auth/login/login.component';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'register',
    component: RegisterComponent,
  },
  {
    path: 'groups',
    component: GroupsComponent,
  },
  { path: '**', redirectTo: '/' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Frontend proxy

const PROXY_CONFIG = [
  {
    context: ["/", "/user", "/group", "/character"],
    target: "http://localhost:8080",
    secure: false,
  },
];

module.exports = PROXY_CONFIG;

Answer 1

You must forward to index.html for every single Angular route you have setup in your routing module, not just the root route. See Spring Boot with redirecting with single page angular2 for defining a single Controller to forward all requests to index.html.

Otherwise Spring tries to handle the url itself but since it doesn't have a @Controller request mapping for the url you entered (because you want Angular to handle it), it returns 404.

EDIT

OP is referring to ng serve and not a deployed environment. In that case, you'd have to create an ErrorController that redirects to the ng dev server - http://localhost:4200.

@Controller
@RequestMapping("${server.error.path:${error.path:/error}}")
public class AngularRedirectErrorController extends AbstractErrorController {

  private final ErrorAttributes errorAttributes;

  public AngularRedirectErrorController(ErrorAttributes errorAttributes) {
    super(errorAttributes);
    this.errorAttributes = errorAttributes;
  }

  @RequestMapping(produces = MediaType.TEXT_HTML_VALUE)
  public String redirectToAngular(ServletWebRequest request) {
    Map<String, Object> errorAttrs = errorAttributes.getErrorAttributes(request, false);
    String path = (String) errorAttrs.get("path");
    return "redirect:http://localhost:4200" + path;
  }

  @RequestMapping(produces = MediaType.APPLICATION_JSON_VALUE)
  @ResponseBody
  public ResponseEntity<Map<String, Object>> error(HttpServletRequest request) {
    HttpStatus status = getStatus(request);
    if (status == HttpStatus.NO_CONTENT) {
        return new ResponseEntity<>(status);
    }

    WebRequest webRequest = new ServletWebRequest(request);
    Map<String, Object> body = errorAttributes.getErrorAttributes(webRequest, false);
    return new ResponseEntity<>(body, status);
  }

  @Override
  public String getErrorPath() {
    return null;
  }

}