I can navigate to the component just fine, and the header/sidebar load fine, and even the component typescript works correctly.
But none of the HTML is displaying. This is specifically for the dashboard/:id
route.
Any ideas?
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 {}
CodePudding user response:
You are redirecting to home
but you don't have home
path in the same level:
Change it to:
export const routes: Routes = [
{path: 'login', component: LoginComponent},
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
},
{
path: 'home',
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),
}
]
}
];
And the navigate to /home/dashboard/:id
.
Or:
export const routes: Routes = [
{path: 'login', component: LoginComponent},
{
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),
}
]
}
];
This will work with no change in navigation. Just navigate to /dashboard/:id
.