Understanding Angular routing at feature module

Question

I have routing defined as so in my app-routing.module.ts

[
   {path: 'xyz', loadChildren: './child/child.module#ChildModule'}
]

and in child-routing.module.ts as

[
    {path: '', component: ChildComponent},
    {path: ':id', component: ChildComponent}
]

When I visit the route localhost:4200/xyz it loads the ChildComponent which is expected.

But when I go to localhost:4200/ it loads the ChildComponent. This wasn't expected as I assumed it is parent_route i.e xyz plus child_route.

How do I restrict angular from loading ChildComponent on /

Example posted on StackBlitz https://stackblitz.com/edit/angular-xts7bc

Post a complete minimal example, as a stackblitz, reproducing the issue. My guess is that you imported the child module in your root module. — JB Nizet
– JB Nizet, Commented Mar 30, 2019 at 6:47
Just as I suspected: you're importing your child module in parent module. — JB Nizet
– JB Nizet, Commented Mar 30, 2019 at 7:40

Sachin Gupta · Accepted Answer · 2019-03-30 08:20:53Z

2

You are trying to lazy-load the ParentModule and the ChildModule, but you have imported both of them, in AppModule and ParentModule respectively. The router are not matching to the defined routes in Parent and AppModule, but they match the ChildModule, hence you get that component even on the root ('/').

To fix this, remove the ParentModule from the imports array of AppModule and remove ChildModule from the imports of ParentModule.

answered Mar 30, 2019 at 8:20

Sachin Gupta

5,3493 gold badges19 silver badges33 bronze badges

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

2 Comments

Vishnudev Krishnadas Over a year ago

Thanks for the answer. It says can't find the module.

Vishnudev Krishnadas Over a year ago

Well, that was weird. I restarted ng serve and everything is fine now. @Sachin

Collectives™ on Stack Overflow

Understanding Angular routing at feature module

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related