title: Router navigate to child route - Angular 6
body: <p>I've defined my routes like this: </p>
  
  <pre><code>const routes: Routes = [
      { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
      { path: 'faq', loadChildren: './faq/faq.module#FaqPageModule' },
      { path: 'terms', loadChildren: './terms/terms.module#TermsPageModule' }
  ];
  @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>and like this: </p>
  
  <pre><code>const routes: Routes = [
    {
      path: 'tabs',
      component: TabsPage,
      children: [
        {
          path: '',
          redirectTo: '/tabs/(list:list)',
          pathMatch: 'full',
        },
        {
          path: 'list',
          outlet: 'list',
          component: ListPage
        },
        {
          path: 'profile',
          outlet: 'profile',
          component: ProfilePage,
          canActivate: [AuthGuardService]
        }
      ]
    },
    {
      path: '',
      redirectTo: '/tabs/(list:list)',
      pathMatch: 'full'
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class TabsPageRoutingModule {}
  </code></pre>
  
  <p>I am interested how I can navigate to ListPage or ProfilePage using router <code>.navigate()</code> method in component or <code>routerLink</code> in some html element.</p>
  
  <p>I tried something like this</p>
  
  <pre><code>this.router.navigate(['tabs/profile']);
  </code></pre>
  
  <p>or</p>
  
  <pre><code>this.router.navigate(['profile']);
  </code></pre>
  
  <p>or</p>
  
  <pre><code>this.router.navigate(['tabs(profile:profile)']);
  </code></pre>
  
  <p>and got this error :</p>
  
  <blockquote>
    <p>Error: Cannot match any routes. URL Segment: ''</p>
  </blockquote>