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?

Answer 1

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