One issue I'm facing is trying to navigate back to the app root from a child route.
Here's my current structure:
export const rootRouterConfig: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent, canActivate: [AuthGuard] },
{ path: 'dashboard', component: DashboardComponent, resolve: { data: UserResolver},
children: [
{ path: '', redirectTo: 'projects', pathMatch: 'full' },
{ path: 'projects', component: ProjectsComponent, resolve: { data: UserResolver}},
{ path: 'addproject', component: AddprojectComponent, resolve: { data: UserResolver}},
{ path: 'updateproject/:key', component: AddprojectComponent, resolve: { data: UserResolver}},
{ path: 'network', component: NetworkComponent, resolve: { data: UserResolver}},
{ path: 'figures', component: FiguresComponent, resolve: { data: UserResolver}},
{ path: 'user', component: UserComponent, resolve: { data: UserResolver}}
]
},
{ path: 'forgot', component: ForgotComponent },
];
This snippet shows the content of app.component.html:
<main>
<router-outlet></router-outlet>
</main>
And this part presents dashboard.component.ts:
<div class="dashboard-content-wrapper">
<router-outlet></router-outlet>
</div>
In the UserComponent, there's a button intended to redirect users back to the login page as it is the root. However, when I try clicking it, I can't seem to move past the dashboard component. Any ideas on how to achieve this?
deleteProfile() {
this.route.navigate(['/'])
}