I have an Angular 10 app with 2 feature modules. One for the landing page which can be reached with the '' route, lazy-loading the feature module LandingPageModule. The second one is for a dashboard, which can be reached with the '/dashboard' route, lazy-loading the feature module DashboardModule.
Inside DashboardModule, I need a sidebar to stay visibile during the whole navigation of the user. I've used child routes to achieve this, so the sidebar can be added inside the parent component, and handle child route with <router-outlet>, allowing user to navigate through childroutes.
There are 3 child routes in the DashboardRoutingModule :
'/dashboard/summary'loadingSummaryComponent'/dashboard/bookings'loadingBookingListComponent'/dashboard/clients'loadingClientListComponent
I made this schema of the route workflow to complete my explanation.
Here you can find the code to achieve this
AppRoutingModule
const routes: Routes = [
{ path: '', loadChildren: () => import('./landing-page/landing-page.module').then(m => m.LandingPageModule) },
{ path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
{ path: '**', redirectTo: '' }
];
app.component.html
<router-outlet></router-outlet>
LandingPageRoutingModule
const routes: Routes = [{ path: '', component: LandingPageComponent }];
DashboardRoutingModule
const routes: Routes = [
{
path: '', component: DashboardComponent,
children:
[
{ path: 'summary', component: SummaryComponent },
{ path: 'bookings', component: BookingListComponent },
{ path: 'clients', component: ClientListComponent },
]
},
{ path: '**', redirectTo: '', pathMatch: 'full' }
];
dashboard.component.html
<div id="wrapper">
<app-sidebar></app-sidebar>
<div id="content">
<router-outlet></router-outlet>
</div>
</div>
My problem is
When the user navigates to /dashboard, he gets the sidebar and a blank page next to it, because there isn't any component added below the <router-outlet>.
My question is
What should I do to prevent user to navigate manually to /dashboard ?
If I use redirectTo, the DashboardComponent isn't loaded and child routes aren't working at all.
Another good solution would be to remove the /dashboard/summary child route. When the user navigates to /dashboard, it would load the SummaryComponent as outlet for the router and keep the sidebar visible. But I couldn't find any way to make it work like that.