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:

Andreas Högbom · Accepted Answer · 2019-10-01 18:59:01Z

3

Try this in app-routing.module

const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
    children: [
      {
        path: "",
        component: ContactComponent,
      },
      {
        path: "info",
        component: InfoComponent,
      },
    ]
  },
];

answered Oct 1, 2019 at 18:59

Andreas Högbom

312 bronze badges

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

1 Comment

Joep Kockelkorn Over a year ago

This works. The empty top route for the HomeComponent has no purpose though as this will always match.

Deni Kuligin · Accepted Answer · 2019-10-01 19:43:01Z

2

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

edited Oct 1, 2019 at 19:43

answered Oct 1, 2019 at 19:05

Deni Kuligin

366 bronze badges

5 Comments

terahertz Over a year ago

Nice, this is almost a good answer. But perhaps, you want to explain that you've added lazy loading (and what is it), and also briefly explain how children property works or perhaps a link to the official docs? Welcome to SO, anyway! =)

DiPix Over a year ago

If I would not to use lazy loading how the AppModule would looks like? instead loadChildren: './home/home.module#HomeModule',

Deni Kuligin Over a year ago

you'd import the HomeModule into AppModule. And append the following in the app-routing, under HomeComponent path: children: [ { path: '', component: ContactComponent } ] Rewrite from loadChildren to 'path: '', component: HomeComponent'

DiPix Over a year ago

So actually as @Andreas Högbom answered. Right?

Deni Kuligin Over a year ago

Yeap, but don't forget to import HomeModule into AppModule.

Joep Kockelkorn · Accepted Answer · 2019-10-01 19:02:47Z

0

You now have no purpose for the top level router-outlet (in AppComponent). If it would have a purpose (to match the HomeComponent on say '/home') then you could have matched a second route in the second router-outlet with some children of the 'home' route (ContactComponent => '/home/contact' and InfoComponent => '/home/info').

answered Oct 1, 2019 at 19:02

Joep Kockelkorn

3121 silver badge7 bronze badges

Collectives™ on Stack Overflow

How should I handle routing with nested Module in Angular

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related