title: Ionic 4 / Angular 6 : Nested child routes in tabs
body: <p>I generated an app with the Ionic Tabs Component.</p>
  
  <p>Tabs are <strong>Deliveries</strong>, <strong>About</strong> and <strong>Contact</strong>.</p>
  
  <p>Then I generated a page <strong>Details</strong>.</p>
  
  <p>I would like the page <strong>Details</strong> to be a child of <strong>Deliveries</strong> tab.</p>
  
  <p>Meaning when I'm on a <strong>details</strong> page, I'm navigating through the <strong>deliveries</strong> tab.</p>
  
  <p>Someone asked a similar question on <a href="https://stackoverflow.com/questions/52577779/ionic-4-angular-6-nested-child-routes-in-tabs">Ionic Forum</a></p>
  
  <p>The directory structure generated :</p>
  
  <pre><code>- about
  - contact
  - deliveries
      deliveries.module.ts
  - details
      details.module.ts
  - tabs
      tabs.module.ts
      tabs.page.html
      tabs.router.module.ts
  app.module.ts
  app-routing.module.ts
  </code></pre>
  
  <p>This is the generated <strong>app-routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  const routes: Routes = [
    { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  ];
  @NgModule({
    imports: [
      RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>This is the generated <strong>tabs.router.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { TabsPage } from './tabs.page';
  import { DeliveriesPage } from '../deliveries/deliveries.page';
  import { AboutPage } from '../about/about.page';
  import { ContactPage } from '../contact/contact.page';
  
  const routes: Routes = [
    {
      path: 'tabs',
      component: TabsPage,
      children: [
        {
          path: '',
          redirectTo: '/tabs/(deliveries:deliveries)',
          pathMatch: 'full',
        },
        {
          path: 'deliveries',
          outlet: 'deliveries',
          component: DeliveriesPage
        },
        {
          path: 'about',
          outlet: 'about',
          component: AboutPage
        },
        {
          path: 'contact',
          outlet: 'contact',
          component: ContactPage
        }
      ]
    },
    {
      path: '',
      redirectTo: '/tabs/(deliveries:deliveries)',
      pathMatch: 'full'
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class TabsPageRoutingModule {}
  </code></pre>
  
  <p>This is a generated <strong>tabs.page.html</strong></p>
  
  <pre><code>&lt;ion-tabs&gt;
    &lt;ion-tab label="Deliveries" icon="bicycle" href="/tabs/(deliveries:deliveries)"&gt;
      &lt;ion-router-outlet name="deliveries"&gt;&lt;/ion-router-outlet&gt;
    &lt;/ion-tab&gt;
    &lt;ion-tab label="About" icon="information-circle" href="/tabs/(about:about)"&gt;
      &lt;ion-router-outlet name="about"&gt;&lt;/ion-router-outlet&gt;
    &lt;/ion-tab&gt;
    &lt;ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)"&gt;
      &lt;ion-router-outlet name="contact"&gt;&lt;/ion-router-outlet&gt;
    &lt;/ion-tab&gt;
  &lt;/ion-tabs&gt;
  </code></pre>
  
  <p>This is a generated <strong>deliveries.module.ts</strong></p>
  
  <pre><code>import { IonicModule } from '@ionic/angular';
  import { RouterModule } from '@angular/router';
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  
  import { DeliveriesPage } from './deliveries.page';
  
  @NgModule({
    imports: [
      IonicModule,
      CommonModule,
      FormsModule,
      RouterModule.forChild([
        {
          path: '',
          component: DeliveriesPage
        }
      ])
    ],
    declarations: [
      DeliveriesPage
    ]
  })
  export class DeliveriesPageModule {}
  </code></pre>
  
  <p>This is <strong>details.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { Routes, RouterModule } from '@angular/router';
  
  import { IonicModule } from '@ionic/angular';
  
  import { DetailsPage } from './details.page';
  
  const routes: Routes = [
    {
      path: '',
      component: DetailsPage,
    }
  ];
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      IonicModule,
      RouterModule.forChild(routes)
    ],
    declarations: [DetailsPage]
  })
  export class DetailsPageModule {}
  </code></pre>
  
  <p>So, all my attempts failed, I tried to follow the same logic as above.</p>
  
  <p>I tried to work in <strong>deliveries.module.ts</strong></p>
  
  <pre><code>RouterModule.forChild([
    {
      path: '',
      component: DeliveriesPage,
    },
    {
      path: 'details',
      loadChildren: '../details/details.module#DetailsPageModule'
    }
  ]),
  </code></pre>
  
  <p>I also tried</p>
  
  <pre><code>RouterModule.forChild([
    {
      path: '',
      component: DeliveriesPage,
    },
    {
      path: 'details',
      outlet: 'deliveries
      loadChildren: '../details/details.module#DetailsPageModule'
    }
  ]),
  </code></pre>
  
  <p>Or</p>
  
  <pre><code>RouterModule.forChild([
    {
      path: '',
      component: DeliveriesPage,
      children: [
        {
          path: 'details',
          loadChildren: '../details/details.module#DetailsPageModule'
        }
      ]
    },
  ]),
  </code></pre>
  
  <p>Can't find a way to access details page from</p>
  
  <ul>
  <li>/tabs/(deliveries:deliveries)/details</li>
  <li>/tabs/(deliveries:details)</li>
  </ul>
  
  <p>Is it possible to achieve that? It is a little bit confusing.</p>
  
  <p>The easy way right now to access <strong>details</strong> page is to define the route in 
  <strong>app-routing.module.ts</strong>, but it would not be part of the same router outlet.</p>