how to define angular 6 route for multiple level path

Question

I want to define multiple level route in angular 6, this is what I need:

for first level routes, I have:

dashboardRoutes:Routes=[
    {
        path: "dashboard",
        component: DashobardComponent,
        canActivate: [AuthGuard],
        children:[
            {
                path: 'user', component: UserComponent,
            },
            {
                path: 'overview', component:OverViewComponent
            }
        ]
    }
];

But now, I want to have overview to have their own child, so I defined html as:

<div>This is overvew</div>
<router-outlet></router-outlet>

And then I defined overview routes like below:

    const overviewRoutes:Routes = [
    {
        path: "",
        component: OverViewComponent,
        children:[
            {
                path:'reg',
                component: RegularComponent
            },
            {
                path:'rt',
                component: RealTimeComponent
            }
        ]
    }
];

then I got error:

 Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/overview/reg'

Now, I am lost, overView is already defined in the second route, how should I update first route here?

I changed first one to

path: 'overview', redirectTo:'overview/reg', totally failed.

I could define all the routes in the first route definition, but that is not elegant enough at all. I want the overview route definition in its own module here.

Hope you understand what I mean here.

Thanks

Answer 1

Try this one:

const overviewRoutes:Routes = [
{
    path: "dashboard/overview", // <-- missed this
    component: OverViewComponent,
    children:[
        {
            path:'reg',
            component: RegularComponent
        },
        {
            path:'rt',
            component: RealTimeComponent
        }
    ]
}

];

Anguar says it cannot find the route dashboard/overview/reg, because you didn't define where is dashboard/overview. Simply put it to path of the first component.