Component not loading on feature module router-outlet

Question

I am trying to implement lazy loading for feature modules.How can I load components declared in feature module on router-outlet defined in feature module component?

I have one base module (AppModule) with component(AppComponent) having router-outlet. There is another module HomeModule with its own HomeComponent having another router-outlet. HomeModule is being lazily loaded and defined in AppRoutingModule (included in AppModule) as following :

{
    path:'home',
    loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule)
}

HomeModule has its own routing module(HomeRoutingModule) and own router-outlet in HomeComponent. There are two components NavigationComponent and IndexComponent which declared in HomeModule. HomeRoutingModule :

{
    path : '',component : HomeComponent,
    path : 'index',component : IndexComponent
}

HomeComponent is defined as following :

<navigation></navigation>
<router-oulet></router-oulet>

I am trying to load IndexComponent on 'home/index' with NavigationComponent from HomeComponent html as above. Here is how I am routing to the url :

thi.router.navigate(['home/index'])

But somehow only IndexComponent is visible not NavigationComponent(<navigation></navigation>) whereas IndexComponent should be loaded with router-outlet of HomeComponent html with NavigationComponent

ishan srivastava ishan srivastava · Accepted Answer · 2019-06-20T11:14:05

In order to load the IndexComponent, you need to provide it as children to HomeComponent in the route .

{
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'index',
        component: IndexComponent
      },
}

Also, let me know if there are any console errors?

Component not loading on feature module router-outlet

1 Answers