Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 4 Lazy Loading and Routes not working

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?

like image 573
Ali Briceño Avatar asked Jun 04 '17 16:06

Ali Briceño


People also ask

How do I know if Angular lazy loading is working?

If you want to check how lazy loading works and how lazy loading routing flow, then Augury is the best tool we have. Click on ctrl+F12 to enable the debugger and click on the Augury tab. Click on the router tree. Here, it will show the route flow of our modules.

What is the new way of declaring lazy loaded routes?

Lazy loaded routes need to be outside of the root app module. You will want to have your lazy loaded features in feature modules. First, let's use Angular CLI to create a new project with Angular Router: ng new angular-lazy-loading-example --routing --style=css --skip-tests.

What is LoadChildren in Angular routing?

Use LoadChildren:For lazy loading. Using this property will optimize your application's performance by only loading the nested route subtree when a user navigates to a particular URL that matches the current route path. It helps in keeping the nested routes table separate.

What is Lazyload Angular?

What is Lazy Loading? Lazy loading is the process of loading components, modules, or other assets of a website as they're required. Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be loaded as well.


1 Answers

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.

like image 100
Ali Briceño Avatar answered Sep 18 '22 15:09

Ali Briceño