Angular 13 - Lazy load multiple components matching the same URL structure

Question

I'm creating an Angular 13 app that has multiple components that can match the same URL although they would render different content (as in different components) based on the URL value. Thus I can have, like I do in Angular 9 same route paths different components 's answer: https://stackoverflow.com/a/63522451/5293466 I create like a "selector" component that performs the logic and then decides which component should be viewed. That's all fine however this approach - as far as I know - can't handle lazy loading.

I would like to know if I am able to call a component within a component and lazy load the module of it . Is that something achievable? Otherwise how would you handle the scenario where you can have many routes such as /:id/:cityId , /:id/:townId , /:id/:regionId , /:id/:countryId , etc, etc where you can have a growing list of possibilities and avoid getting a bigger bundle for that particular module? Does that make sense?

Yes, you are able to lazy load components via the ComponentFactory. Please take a look at this blog for an in-depth understanding. https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8 — Hisham Hafeel
– Hisham Hafeel, Commented Jul 15, 2022 at 15:17

Carlos Torrecillas · Accepted Answer · 2022-07-18 14:26:38Z

0

Actually, thanks to the comments I was able to play around with the code from the article: https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8 and https://github.com/wittyprogramming/lazy-load-component-angular13 to get it to work. I actually instantiate the relevant component I need, based on a certain condition, using the example here: https://github.com/wittyprogramming/lazy-load-component-angular13/blob/master/src/app/app.component.ts#L31 and violà, I can get the different chunks loaded as I need

answered Jul 18, 2022 at 14:26

Carlos Torrecillas

5,8567 gold badges43 silver badges80 bronze badges

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

Collectives™ on Stack Overflow

Angular 13 - Lazy load multiple components matching the same URL structure

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related