Lazy loading components in angular2

Question

I am having three components that load simultaneously when angular app load. Is there any way that we can load component only when specific route navigate to.

David M. · Accepted Answer · 2016-12-22 13:46:08Z

1

This is what the Angular 2 Router is all about. I strongly suggest you read the documentation on Router thoroughly.

https://angular.io/docs/ts/latest/guide/router.html

The steps you need to do are roughly the following:

Create a main component (ex: my-app) for your app with a <router-outlet> placeholder within its template.
Create your routes
Register those routes in your main application module
Add a reference to your main component (<my-app></my-app>) in your index.html file
Open up one of the URLs you registered as a route and the component you associated with that route will get created and inserted in place of your <router-outlet> element.

answered Dec 22, 2016 at 13:46

David M.

2,6391 gold badge17 silver badges15 bronze badges

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

1 Comment

gye Over a year ago

What if we don't want to use router to do the component-lazy-loading? Let say the module and one of the 3 components are eagerly loaded, how do we lazily load the other 2 components on-demand? I heard Angular 4 can handle this more straightforward, but I haven't really dig into this and it's still experimental.

Collectives™ on Stack Overflow

Lazy loading components in angular2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related