Angular 5 child routes adding parentheses to the route

Question

I have an Angular 5 application with a series of components. Some of the components are children of others, and some are not.

I would like the application to have a structure such as:

*/my-account/overview    // homepage
*/my-account/my-stuff
*/profile
*/non-default

I have a DefaultComponent that contains some generic elements such as site navigation that I would like to be present on most of the pages (everything except for the */non-default route/component).

My routing module defines the routes below:

export const routes: Routes = [
    { path: '', redirectTo: 'my-account', pathMatch: 'full' },       // should redirect to localhost:4200/my-account
    { path: '', component: DefaultComponent, children: [
        { path: 'my-account', children: [
            { path: '', redirectTo: 'overview', pathMatch: 'full' }, // should redirect to localhost:4200/my-account/overview
            { path: 'overview', component: OverviewComponent },      // should resolve: localhost:4200/my-account/overview
            { path: 'my-stuff', component: MyStuffComponent }        // should resolve: localhost:4200/my-account/my-stuff
        ]},
        { path: 'profile', component: ProfileComponent }             // should resolve: localhost:4200/profile
    ]},
    { path: 'non-default', component: NonDefaultComponent }          // should resolve: localhost:4200/non-default
];

These routes resolve perfectly if I hit the URL directly in the browser. The problem I have is that when I try to render an anchor with a [routerLink] directive, the URL that is actually applied to the href is

href="/my-account/overview/(profile)"

rather than

href="/profile"

for the ProfileComponent. So if I render a list of navigation items with [routerLink], each of the items has an href that doesn't actually resolve to the component.

If it helps, I have a Github repository demonstrating the issue here.

Have I misconfigured the routing?

I think that the problem is when you defined the menu items: urls must be starts with "/", so, e.g.menuItems = [{ label: 'Overview', url: '/my-account/overview' },..]; — Eliseo
Thank you very much. It seems I was over complicating things! — Chris O'Brien

Chris O'Brien Chris O'Brien · Accepted Answer · 2018-03-21T22:36:50

As Eliseo correctly pointed out. I was missing a slash at the beginning of my routes in the RouterLink itself.

[routerLink]=['my-account/overview']

should have been

[routerLink]=['/my-account/overview']

It's worth noting that it had been working fine until I introduced child routes.

Angular 5 child routes adding parentheses to the route

1 Answers