Angular 4 Lazy Loading and Routes not working
16,886
The problem was with the way I've declared my route on my lazy module:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar',
component: CalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '',
component: MainCalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user',
component: EditEventComponent,
canActivateChild: [AuthGuard, CalendarGuard]
}
]
}
]
The path
of CalendarComponent
had to change from:
path: 'calendar', // wrong
component: CalendarComponent,
...
to the below:
path: '', // right
component: CalendarComponent,
...
Thanks to @jotatoledo on gitter that help me to solve this.
Author by
Ali Briceño
Developer ReactJS | Angular | Javascript and Design is my passion!
Updated on June 04, 2022Comments
-
Ali Briceño almost 2 years
I have a module with the routes of my app. One of this routes is a lazy loading module.
The problem is that this lazy loading module haves inside a routes for child components. But on my router config this routes don't appears... So when i call the lazy module don't show anything on my screen.
Here is my router config (main module):
export const MODULE_ROUTES: Route[] =[ { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, { path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] }, { path: 'calendar', loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]}, { path: '**', component: NoPageFoundComponent, pathMatch: 'full' } ] . . . @NgModule({ imports: [ RouterModule.forChild(MODULE_ROUTES) . . .
On my lazy module:
export const MODULE_CALENDAR_ROUTES: Route[] = [ { path: 'calendar', component: CalendarComponent, canActivateChild: [AuthGuard, CalendarGuard], children: [ { path: '', component: MainCalendarComponent, canActivateChild: [AuthGuard, CalendarGuard] }, { path: 'user', component: EditEventComponent, canActivateChild: [AuthGuard, CalendarGuard] } ] } ] . . . @NgModule({ imports: [ SharedModule, . . . RouterModule.forChild(MODULE_CALENDAR_ROUTES)
If i print my router config this routes declaren on my lazy module don't show:
Routes: [ { "path": "dashboard", "canActivate": [ null ] }, { "path": "calendar", "loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule", "canActivate": [ null ] }, { "path": "**", "pathMatch": "full" }, { "path": "dashboard" } ]
Can you help me?