lazy load modules in child routing

Question

I just have a problem, that my components aren't loaded when I lazy load the childs of the childs in angular. The resolver are loaded for some reason.

In detail I've loaded my child routes in my app routing module. For this case I use lazy loading as mentioned. These child routes got loaded without any problem, but if I want to load another child in this route the problem occures. The code is structured the same, but for some reason it doesn't work on one layer deeper. Does anyone of you maybe has a code example for this usecase oder knows why this happens?

EDITED with more details: I've created a resolver for the app.module (you can recognize if it gets loaded with the console.log). Angulars normal behaviour is to load the resolver if you are typing in the URL ([...]stackblitz/first/second). If I declare it as childs the component isn't loaded anymore, but the resolver still does.

Here is the link: https://stackblitz.com/edit/angular-6csggp

Best regards! :)

Answer 1

Individual Routes

As I already mentioned in my comment, LazyLoading works the same, regardless of which level deep you want to implement it. I created a small StackBlitz to give you an example of how it works.

Nested Routes (children)

If you want to declare your routes as children (which is what you want to do by what I read), angular will attempt to load them as nested navigation. Roughly explained, this means that your app.component has a <router-outlet> which hosts the parent component from your app-routing.module . The children declared in your route will in turn be loaded into a <router-outlet> that resides in the parent component. This method of routing is usually used if multiple routes have something in common (eg a header) and thus should not be repeated in every route.

Or, in other words, the components that match each level in the navigation tree will be shown below each other instead of replacing each other. So, in your case, they might resolve but have no <router-outlet> to reside in.

I modified forked the StackBlitz to show you how nested navigation works with LazyLoading. Also, a direct link so you can see that everything is loading, even when directly opening /top-level-nested/first-child/second-child : https://angular-juudzm.stackblitz.io/top-level-nested/first-child/second-child