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.

Share:
16,886
Ali Briceño
Author by

Ali Briceño

Developer ReactJS | Angular | Javascript and Design is my passion!

Updated on June 04, 2022

Comments

  • Ali Briceño
    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?