Path name duplicated in navigation bar with children routes in Angular2 Component Router

Question

I was experiencing some problems integrating the Component Router to my Angular2 app as when trying to navigate around my app I was getting the following error: 'EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes:'

Thus with some advice from Stackoverflow and The Official docs I applied a redirect object to my child routes in my Routes like so

children: [
    {
        path: ':id',
        component: DetailMoreLayout
    },
    {
        path: '',
        redirectTo: 'parent-path',
        pathMatch: 'full'
    }
]

So in my app I have the following routes. Please note DisplayRoutes is a custom type I made by extending the Route object:

export const routes:DisplayRoutes = [
    {
        path: '',
        display: 'Home',
        component: HomeComponent
    }, {
        path: 'about-us',
        display: 'About Us',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: 'about-us',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'teams',
        display: 'Teams',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: 'teams',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'careers',
        display: 'Careers',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: 'careers',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'press',
        display: 'Presse',
        component: LeftSubNavigation,
        index: {
            component: DetailBlogLayout
        },
        children: [
            {
                path: ':id',
                component: DetailBlogLayout
            },
            {
                path: '',
                redirectTo: 'press',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'technology',
        display: 'Technology',
        component: LeftSubNavigation,
        index: {
            component: DetailBlogLayout
        },
        children: [
            {
                path: ':id',
                component: DetailBlogLayout
            },
            {
                path: '',
                redirectTo: 'technology',
                pathMatch: 'full'
            }
        ]
    }, {
        path: 'promotion',
        display: 'Promotion',
        component: LessLayout
    }, {
        path: 'contact',
        display: 'Contact',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: 'contact',
                pathMatch: 'full'
            }
        ]
    }
];

Everything is now cool, but should I use the routerLink directive in my HTML template to link to a route or in a component use .navigateByUrl(route) or .navigate([route]) methods my url / path is duplicated so http://localhost:4200/about-us/ becomes http://localhost:4200/about-us/about-us. Even when directly or "deep linking" to http://localhost:4200/about-us the url is changed in the browser to http://localhost:4200/about-us/about-us

What am I doing wrong? Can anyone see? I have tried setting pathMatch: 'full' to pathMatch: 'prefix' but this doesn't work. I am using "@angular/router": "3.0.0-beta.2"

Answer 1

I think you are implementing classic master-detail pattern in your application and it is perfect usecase of componentless router.

You need to refactor you parent template to use 2 router-outlet left /right and load there.

See this excellent article

Sidenote: your applications current behaviour is inline with configurations.
when you type /about-us in location bar it look for '' router and which says to go to about-us again so it adds about-us again.

Answer 2

Not entirely sure, because I haven't played around a lot with the new router, but I suspect you should change your redirect to redirectTo: '../about-us'. This way it will navigate to the parent router and search for the about-us path in there:

export const routes:DisplayRoutes = [
    {
        path: '',
        display: 'Home',
        component: HomeComponent
    }, {
        path: 'about-us',
        display: 'About Us',
        component: LeftSubNavigation,
        index: {
            component: DetailMoreLayout
        },
        children: [
            {
                path: ':id',
                component: DetailMoreLayout
            },
            {
                path: '',
                redirectTo: '../about-us', //<-- here
                pathMatch: 'full'
            }
        ]
    },
    ...
]