I'm completely new to Angular and I am in need of assistance with routing. The structure of my folders is as follows:
https://i.sstatic.net/qNT0W.jpg
There are two distinct layouts in my application - one for the login page, and another for the main admin page complete with sidebar and toolbar.
Upon logging in, I expected to see the dashboard page within the main layout, but it only displays the layout without the dashboard content.
app-routing.module.ts
const accountModule = () => import('./features/account/account.module').then(x => x.AccountModule);
const mainModule = () => import('./features/main/main.module').then(x => x.MainModule);
const routes: Routes = [
{ path: '', loadChildren: mainModule, canActivate: [AuthGuard] },
{ path: 'account', loadChildren: accountModule },
// redirect to home if no matching route
{ path: '**', redirectTo: '' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
account-routing.module.ts
const routes: Routes = [
{
path: '', component: LayoutComponent,
children: [
{ path: 'login', component: LoginComponent },
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
main-routing.module.ts
const routes: Routes = [
{
path: '', component: LayoutComponent,
children: [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'client', component: ClientComponent },
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
Could someone guide me on adjusting the route so that when accessing http://localhost:4200, the dashboard page within the main layout is displayed instead of just the layout itself? Alternatively, how can I set up a redirection to http://localhost:4200/dashboard if displaying both together isn't feasible? Any help would be greatly appreciated.