My routing setup is structured as follows:
In the app module, I have defined the initial level of routing using the following configuration:
const routes: Routes = [
{ path: 'login', component: LoginComponent, },
{ path: 'dash', redirectTo:"dashboard" },
{ path: '**', component: NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
Within the app component, I have included
<router-outlet></router-outlet>Furthermore, I created a dashboard module with its own routing configuration outlined below:
const dashboardRoutes: Routes = [
{
path: '', //null path to utilize dashboardtemplate which includes sidebar links
component: DashboardTemplateComponent,
children: [
{
path: 'profile',
component: ProfileComponent,
},
{
path: 'dashboard',
component: DashboardComponent,
},
{
path: 'users',
component: UsersComponent,
},
]
}
];
@NgModule({
imports: [
RouterModule.forChild(dashboardRoutes)
],
exports: [
RouterModule
]
})
Additionally, there is a dashboard template component defined as:
@Component({
template: `
<dash-side></dash-side>
<router-outlet></router-outlet>`
})
export class DashboardTemplateComponent implements OnInit {
//logic for navigation based on user login status
}
The objective was to allow the profile and users components to access the sidebar links within the DashboardTemplate component.
An issue arises when trying to navigate to the profile component within the dashboard route resulting in redirecting to the NotFoundComponent. How can this problem be resolved?