Qfyilyi

I'm trying to implement lazy loading on children route. I am able to lazy load HomeModule which having multiple components (DetailComponent, SearchCardComponent etc.) which is inside inside header footer layout.

But when I click on SearchComponent link html renders properly but its not loading Header, Footer layout. For header, footer layout I referred exactly this example.

I have the following route structure:

app.routing.ts

const routes: Routes = [                                              

  {

    path: '',

    component: SiteLayoutComponent,

    children: [

        path: RouteConstants.Home,

        component: HomeComponent,

        loadChildren: "./lazyloadingmodules/home.module#HomeModule"

    ] 

  },                                                                        

  {

    path: '',

    redirectTo: '',

  }                                                                        

];

And the HomeModule (which is lazy module) route:

const routes: Routes = [

//routes for post login master page

//{

    //path: '',

    //component: SiteLayoutComponent, 

    //children: [

          { 

            path: RouteConstants.SearchCard, component: SearchCardComponent 

          },

    //]

//}

];

When I click at SearchCardComponent routerLink it loads SearchCardComponent properly but component not showing in the outlet area.It shows with header footer layout.

Can some let me what is the mistake in the code ?

Thanks

After digging a lot into code i have found the solution. There was a mistake in a lazy module routes.

Lazy module routes code change from:

{ 

     path: RouteConstants.SearchCard, component: SearchCardComponent 

},

To

{ 

     path: '', component: SearchCardComponent 

},

It works properly now.