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

Mariusz.v7 · Accepted Answer · 2018-09-10 18:40:30Z

4

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.

edited Sep 10, 2018 at 18:40

answered Jun 1, 2018 at 6:37

Mariusz.v7

2,4622 gold badges20 silver badges28 bronze badges

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

Comments

Chrillewoodz · Accepted Answer · 2018-06-01 06:14:06Z

0

Simple, just have an empty path for the OverViewComponent:

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

answered Jun 1, 2018 at 6:14

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

Comments

Joseph Wu · Accepted Answer · 2018-06-01 06:32:05Z

0

agree with Chrillewoodz's solution. Also, it is good to put 'review' component and it's children into a feature module. In there you can define route file for this feature module.

see official Angular document here, and also Deborah Kurata's Angular router topic talk in this year's NgConf

answered Jun 1, 2018 at 6:32

Joseph Wu

5,0681 gold badge25 silver badges19 bronze badges

2 Comments

user3006967 Over a year ago

I tested using @chrillewoodz solution, not working, please see my updated contents

Joseph Wu Over a year ago

if you've already defined a review module and its own route file, make sure you register the route using 'forChild' command in the module file: imports: [RouterModule.forChild(routes)],

Collectives™ on Stack Overflow

how to define angular 6 route for multiple level path

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related