My Angular project has this folder structure:

.
├── private
│   ├── components
│   └── private-routing.module.ts
├── public
│   ├── components
│   ├── public-routing.module.ts
├── shared
│   ├── components
│   ├── shared-routing.module.ts

The private directory relies to users who are signed in, the public directory for users who are not signed in, and the shared directory contains components which can be used for both type of users.

My goal is to have 2 different components but both should point to the path ''. So I have a HomeComponent in the private directory but also a HomeComponent in the public directory. I.e. if the user is signed in, HomeComponent from the private directory should be activated, otherwise HomeComponent from public directory.

My problem is that I have 2 routes with the path ''.

private-routing.module.ts:

const routes: Routes = [
  { path: '', component: HomeComponent , canActivate: [LoginGuard], data: { isPrivate: true }, title: "Home"}
]

public-routing.module.ts:

const routes: Routes = [
  {path: '', component: HomeComponent, data: {isPrivate: false}, title: "Home"}
]

This is my guard:

@Injectable()
export class PermissionService {
  constructor(private _routerService: RouterService, private loginService: LoginService, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.loginService.isUserLoggedIn().pipe(
      map((isLoggedIn: boolean): boolean => {
        if (next.routeConfig?.path === '') {
          if (isLoggedIn) {
            console.log('User is logged in');
          }
          else {
            console.log('Unknown user');
          }
        }

        if (next.routeConfig?.path === 'login' || next.routeConfig?.path === 'register') {
          if (isLoggedIn) {
            // If the user is already logged in and trying to access /login or /register, redirect to /
            this.router.navigate(['/']).then(() => window.scrollTo(0, 0));
            return false; 
          }
          // Allow access to /login and /register for unauthenticated users
          return true;
        } else if (!isLoggedIn) {
          // User is not logged in, navigate to /login if trying to access protected routes
          const publicPages: string[] = ['/register', '/forgot-password'];
          if (!publicPages.includes(this.router.url) && this._routerService.isPrivate()) {
            this.router.navigate(['/login']).then(() => window.scrollTo(0, 0));
          }
          return false; 
        } else {
          return true;
        }
      })
    );
  }
}
export const LoginGuard: CanActivateFn = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> => {
  return inject(PermissionService).canActivate(next, state);
}

If the user is signed in, I get the log User is logged in and the HomeComponent from private directory can be displayed. However, if the user is not signed in, I get the log Unknown user but the HomeComponent from public directory will not be shown.