My experience with navigating to the component has been smooth, as both the header/sidebar load properly and the component typescript functions correctly.
However, I am facing an issue where none of the HTML is being displayed, specifically when accessing the dashboard/:id route.
Do you have any suggestions on how to troubleshoot this?
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
import { DashboardComponent } from './views/dashboard/dashboard.component';
// Import Containers
import { DefaultLayoutComponent } from './containers';
// AuthGaurd
import { IdguardGuard as IdAuthGaurd } from './idguard.guard';
import { AdminGuard as AdminGuard } from './admin.guard';
import { ClientgaurdGuard as ClientAuthGaurd } from './clientgaurd.guard';
export const routes: Routes = [
{path: 'login', component: LoginComponent},
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
},
{
path: '',
component: DefaultLayoutComponent,
data: {
title: 'Home'
},
children: [
{
path: 'dashboard/:id',
component: DashboardComponent,
canActivate: [IdAuthGaurd, ClientAuthGaurd]
},
{
path: 'base',
loadChildren: () =>
import('./views/base/base.module').then((m) => m.BaseModule),
}
]
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'top',
anchorScrolling: 'enabled',
relativeLinkResolution: 'legacy'
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}