title: Angular 5 child routes adding parentheses to the route
body: <p>I have an Angular 5 application with a series of components. Some of the components are children of others, and some are not.</p>
  
  <p>I would like the application to have a structure such as:</p>
  
  <pre><code>*/my-account/overview    // homepage
  */my-account/my-stuff
  */profile
  */non-default
  </code></pre>
  
  <p>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).</p>
  
  <p>My routing module defines the routes below:</p>
  
  <pre><code>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
  ];
  </code></pre>
  
  <p>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 </p>
  
  <blockquote>
    <p>href="/my-account/overview/(profile)"</p>
  </blockquote>
  
  <p>rather than</p>
  
  <blockquote>
    <p>href="/profile"</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>If it helps, I have a <a href="https://github.com/Joker2000/angular-routing" rel="nofollow noreferrer">Github repository demonstrating the issue here</a>.</p>
  
  <p>Have I misconfigured the routing?</p>