Angular routing loading the grandchild component without the child
I have a stackblitz which I created to try and illustrate a problem I was having with child routes being displayed outside the parent. Instead the app has a similar, but almost opposite, problem: When navigating to a grandparent route with no child url, it places the grandchild component inside the grandparent component without involving the child component. Even though the grandchild is only defined on the child.
There are 2 nested layout components:
-
LayoutComponent(grandparent - defined as the component in app.routing.ts for path: '') -
StoreLayoutComponent(parent - defined as the component in store.routing.ts for path: 'store') - and a component called
DashboardComponent(child).
StoreLayoutComponent has a child route called 'dashboard', which displays aDashboardComponent.
Navigating to 'store/dashboard' should display a DashboardComponent within a StoreLayoutComponent. It does.
Navigating to 'store' should be an invalid route, but instead it displays the DashboardComponent directly within the LayoutComponent. It never loads StoreLayoutComponent, even though that's the parent component for that route, and 'DashboardComponent' is not even defined in the LayoutComponent module.
Why is this a valid route and how is angular displaying a component in the grandparent that is only defined as a child of the parent?
https://stackblitz.com/edit/angular-ivy-xqtxla
Navigating to 'store' should be an invalid route, but instead it displays the DashboardComponent directly within the LayoutComponent. It never loads StoreLayoutComponent, even though that's the parent component for that route, and 'DashboardComponent' is not even defined in the LayoutComponent module.
Navigating to 'store' wouldn't be an invalid route, but will load the StoreModule and display StoreLayoutComponent as it matches the '' path.
In your case instead of loading StoreLayoutComponent, it loads the DashboardComponent because you are importing StoreDashboardModule within StoreModule imports array. The StoreDashboardModule defines an empty path '' route too, and since you are importing it, that is what gets matched for 'store'.
In case of 'store/dashboard' it correctly matches the path 'dashboard' within children array.
PS: Since you are lazy loading the StoreDashboardModule, it should not be directly imported within StoreModule imports array.