Angular 5 child routes adding parentheses to the route

问题

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?