How to load more than one component using lazy loading in angular4?

Question

i have just started to learn angular4, and i am a little curious to learn the concept of lazy loading in angular4. i have been going through this article and learned a little on lazy loading, but my question is in this article which i have mentioned above, there is only one component in the lazy module, what if i want more than one component in the lazy loading module, then how could i declare that in the route config of the lazy loading module. currently the route config for the lazy loading is

const routes: Routes = [ { path: '', component: LazyComponent } ];

what if i want another component, then how would be my route config?

I do not believe you are currently lazy-loading with that configuration. Lazy loading according to the documentation angular.io/guide/router#milestone-6-asynchronous-routing can be done with the loadChildren attribute. — Tommy May
– Tommy May, Commented Dec 27, 2017 at 18:45
To answer your questions though, you wouldn't lazy load more than one component. Instead the lazy loaded component would have other components inside of it. <lazy-component> <nested-component></nested-component> </lazy-component> — Tommy May
– Tommy May, Commented Dec 27, 2017 at 18:47
@TommyMay cant there be anything like this in the lazy module route const routes: Routes = [ { path: '', component: LazyComponent } , { path: '/anotherComponent', component: AnotherLazyComponent } ]; — Lijin Durairaj
– Lijin Durairaj, Commented Dec 27, 2017 at 18:58
@LijinJohn Yes, that approach would also work, and you would be injecting your components into the <router-outlet> used in app-root in your example. — Uğur Dinç
– Uğur Dinç, Commented Dec 27, 2017 at 19:21

Uğur Dinç · Accepted Answer · 2017-12-27 18:58:25Z

1

You can define routes using children in your lazy modules' routes:

const gtPermitRoutes: Routes = [
    { path: '', component: PermitComponent, children: [
        {path: '', component: PermitListComponent},
        {path: ':permitNumber', component: PermitDetailComponent},
     ]}
 ];

And any component you declare in your lazy module would be lazily loaded, including the components that don't appear in your routes, but used using selectors in your template:

@NgModule({
    declarations: [
        PermitComponent,
        PermitDetailComponent,
        AnotherComponent, // selector <app-another-component>
        PermitListComponent
    ],
    imports: [

    ]
})
export class PermitModule {}

edited Dec 27, 2017 at 18:58

answered Dec 27, 2017 at 18:52

Uğur Dinç

2,4652 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load more than one component using lazy loading in angular4?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related