App Routing and Lazy Loading
Lazy loading as you can see in the picture above offers encapsulation of the components under modules that can be only loaded under demand when the user redirects him/herself to the link pointing to that module, giving us a chance to decrease initial loading time of the application significantly, since the only component loading in the beginning in this case is the app component, along with the scripts in index.html.
All of the current routes that were done before were changed. As a result to that, an explanation of the new routing hierarchy is due.
We start explaining the routing hierarchy by exploring the app module routing, and how all the other module routes are generated from here.
{
path: '',
component: AppComponent
},
{
path: 'activities',
loadChildren: 'app/activities/activities.module#ActivitiesModule'
},
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule'
},
{
path: 'auth',
loadChildren: 'app/auth/auth.module#AuthModule'
},
{
path: 'content',
loadChildren: 'app/content/content.module#ContentModule'
},
{
path: 'market',
loadChildren: 'app/market/market.module#MarketModule'
},
{
path: 'message',
loadChildren: 'app/messaging/messaging.module#MessagingModule'
},
{
path: 'profile',
loadChildren: 'app/profile/profile.module#ProfileModule'
},
{
path: 'psychologist',
loadChildren: 'app/psychologist/psychologist.module#PsychologistModule'
},
{
path: 'scheduling',
loadChildren: 'app/scheduling/scheduling.module#SchedulingModule'
},
{
path: 'search',
loadChildren: 'app/search/search.module#SearchModule'
},
{
path: '*',
redirectTo: '',
pathMatch: 'full'
}
As you can see in the snippet above, the root module '' starts by navigating to the app component. From there, we start going through every module. So for example, if I want to navigate to the profile module, the route would be profile which is basically the concatenation '' (the root module) and profile( the path for the profile module).
As you can see in the image above, once you load a module the routing tree expands and starts a recursive addition of all the component along the routes.
In order to understand more how to route to a component, we will consider content-routing.module.ts
{
path: 'list',
children: [
{
path: '',
component: ContentListViewComponent
},
{
path: ':tag',
component: ContentListViewComponent
}
]
},
{
path: 'view/:id',
component: ContentViewComponent
},
{
path: 'edit',
children: [
{
path: '',
component: ContentEditComponent
},
{
path: ':id',
component: ContentEditComponent,
}
]
}
As you can see from the snippet above, we have two possible routes for the content list view.
One with no added router params, and the other with :tag. If I want to navigate to the content list view with a tag cats, then following the previous explanation, I will start by '' (the root) passing by content leading to list and finally adding the tag cats in the end. This will leave us with a route as follows: localhost:4200/content/list/cats.
If you have any more questions, don't hesitate to contact me.
Disclaimer: Do NOT use router.navigate on the root '/' or '' This will trigger a circular route and the website will continue routing between your module and the root indefinitely. This is because of a bug that was introduced in angular 5 on lazy loaded module routing using router.navigate.
You can take a look at those issues if you want more info on the bug.