How should I handle routing with nested Module in Angular

Question

I'm trying to handle routing with nested modules in Angular in best way.

Let's say that I start application with URL localhost:5000. I should see HomeComponent with some content on left side and on the right side I have <router-outlet> where should be rendered ContactComponent. If I will go to localhost:5000/info then ContactComponent should be replaced by InfoComponent. How Can I achive this?

This is what I have so far: https://stackblitz.com/edit/angular6-material-components-demo-jb9y3u?file=src/app/home/home-routing.module.ts

(ContactComponent is not rendering and if I go to localhost:5000/info then InfoComponent will render in <router-outlet> from AppComponent

And image for better explanation:

Answer 1

You had some problems with your routes. You should learn more about using the children's property of route.

Also, pay attention to the pathMatch

link: https://stackblitz.com/edit/angular6-material-components-demo-rfeaup

Answering the comment, yes I was added lazy-loading. Otherwise, I can't see what is the sense to use the featured module. The lazy module is a functional module that separates a part of application functionality. If you are using lazy-modules, it's somewhat better for the client because the client shouldn't wait for all the app loaded, but the core.

More about lazy-loading in the Angular application: https://angular.io/guide/lazy-loading-ngmodules

Well, and about "Children" - "contains all the child routes activated under the current route" - according to the official documentation.

I believe you can find it helpful as well: https://angular.io/guide/router#child-route-configuration