Angular nested router with app router returning 404 error on server

It sounds like you're encountering a common issue with Angular applications deployed within a Spring Boot environment, particularly when dealing with nested module routes. Here are some steps and tips to help resolve this issue:

1. Configure Angular Routes Correctly

Ensure that your Angular routes are correctly configured, especially for nested modules. Use the loadChildren method properly:

const routes: Routes = [
  {
    path: 'app',
    loadChildren: () => import('./app/app.module').then(m => m.AppModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'nested',
    loadChildren: () => import('./nested/nested.module').then(m => m.NestedModule),
    canActivate: [AuthGuard]
  },
  { path: '**', redirectTo: 'app' }
];

2. Handle 404 Errors in Spring Boot

Spring Boot needs to be configured to handle Angular routes properly. Add a controller to handle all routes and forward them to the Angular application:

@Controller
public class ForwardController {
    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String forward() {
        return "forward:/";
    }
}

3. Update application.properties

Ensure your application.properties file is configured to serve static content correctly:

spring.mvc.view.prefix=/static/
spring.mvc.view.suffix=.html

4. Use @PathVariable Correctly

If you're using @PathVariable in your Spring Boot controllers, ensure they are correctly mapped to avoid conflicts with Angular routes.

5. Check Base Href

Ensure the tag in your index.html is correctly set. If your application is not hosted at the root, adjust it accordingly:

6. Use Hash Location Strategy (Optional)

If the above steps don't resolve the issue, consider using the Hash Location Strategy in Angular:

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
export class AppModule {}

Example Scenario

Imagine you have an Angular application with nested routes for user management and a dashboard. The main app routes load the user module, and within the user module, there are routes for user details and settings. By ensuring the routes are correctly configured and Spring Boot is set up to handle Angular routes, you can avoid 404 errors when navigating through nested routes.

These steps should help you resolve the 404 errors with nested module routes in your Angular application deployed within a Spring Boot environment[1][2][3].

Thanks