In Angular, the parent component will be activated only when the child route is activated

I want a route structure like this:

If I go to the "/sale" route:

dashboard
feature
sale


If I go to the "/" route:

dashboard


That is, if the child route is not activated, the parent route should not be activated either.

I tried this:

{
path: "",
component: DashboardComponent,
providers: [ DashboardService, PopupService, NotificationsService ],
resolve: { resolved: dashboardResolver },
children: [
{
path: "",
component: FeatureComponent,
children: [
{
path: "sale",
loadChildren: () => import("./features/sale/sale.module").then(module => module.SaleModule)
},
{
path: "currents",
loadChildren: () => import("./features/currents/currents.module").then(module => module.CurrentsModule)
}
]
}
],
},


But this activates the feature component even when it is in the "/" route. And it does not recreate the feature component for each child route. I'm looking for a centralized solution here because the number of children may be high.

Continue reading...