How to manage multiple routes in one lazy loading module

Question

This is site info routing module

const routes: Routes = [
{
  path: '', children: [
    {
      path: '',
      component: WhyUsComponent
    },
    {
      path: '',
      component: WhoWeAreComponent
    },
    {
      path: '',
    component: WhatWeDoComponent
    }
  ]
}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SiteInfoRoutingModule { }

Below is app routing module.The problem is that routerLink of all the routes go to the first component which is why-us in the site-info module. If I keep the path empty in the app routing module and instead add why-us who-we-are and career-with-us in the respective paths in the site-info-routing module then it works but is it the best way to manage it ?

{ 
         path: 'why-us',
         loadChildren: './site-info/site-info.module#SiteInfoModule',

        },
     { 
     path: 'who-we-are',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    },
     { 
     path: 'what-we-do',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    }

score 0 · Answer 1 · answered Jul 12 '19 at 06:38

0

You did not actually link your routes in the lazy loaded module.

const routes: Routes = [
{
  path: '', 
  children: [
    {
      path: '',
      redirectTo: 'why-us',
      pathMatch: 'full'
    {
      path: 'why-us',
      component: WhyUsComponent
    },
    {
      path: ''who-we-are',
      component: WhoWeAreComponent
    },
    {
      path: 'what-we-do',
    component: WhatWeDoComponent
    }
  ]
}
];

And the main routing module:

{ 
    path: 'site-info',
    loadChildren: './site-info/site-info.module#SiteInfoModule'
},

answered Jul 12 '19 at 06:38

skolldev

1,179
9
19

why is pathMatch: 'full' only in first one and not the others – zuyi Jul 12 '19 at 06:45
If you want further information about pathMatch, please check out [this question](https://stackoverflow.com/questions/42992212/in) – skolldev Jul 12 '19 at 06:48
What exact route are you trying to access? The route should look like this: localhost:4200/site-info/why-us – skolldev Jul 12 '19 at 07:08
i was expecting localhost:4200/why-us .. can we make it localhost:4200/why-us no I should make different module for all these 3 components to do so. – zuyi Jul 12 '19 at 07:14
`path: '', loadChildren: './site-info/site-info.module#SiteInfoModule' `works though – zuyi Jul 12 '19 at 07:18

Mahi · Answer 2 · 2019-07-12T07:33:53.763

This tells that whenever you get path why-us load SiteInfoModule

{
        path: '',
        redirectTo: 'why-us',<=== deafult loading path 
        pathMatch: 'full',
    },
  { 
         path: 'why-us',
         loadChildren: './site-info/site-info.module#SiteInfoModule',

        },
     { 
     path: 'who-we-are',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    },
     { 
     path: 'what-we-do',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    }

After that when module is loaded and corresponding routing module is loaded below:-

But, you are not specifying which component to load now as you have entered empty paths for all components.

So better provide some path here as well:-

const routes: Routes = [
{
  path: '', 
  children: [
    {
      path: '',  <=== default path can be empty
      component: WhyUsComponent
    },
    {
      path: 'whoweare',
      component: WhoWeAreComponent
    },
    {
      path: 'whatwedo',
    component: WhatWeDoComponent
    }
  ]
}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SiteInfoRoutingModule { }

How to manage multiple routes in one lazy loading module

2 Answers2