title: Nativescript + Angular, How do I reach child routes in a nested page router outlet?
body: <p>I would like to achieve tabview navigation in a NS + Angular 7 app.</p>
  
  <p>Here is my current setup:</p>
  
  <p>app-routing.module.ts:</p>
  
  <pre><code>...
  
  const routes: Routes = [
      { path: '', redirectTo: '/login', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'tabs', loadChildren: '~/app/tabs/tabs.module#TabsModule'; }
  ];
  
  ...
  </code></pre>
  
  <p>tabs.module.ts:</p>
  
  <pre><code>...
  NativeScriptRouterModule.forChild([
              {   path: 'def',
                  component: TabsComponent,
                  children: [
                    {
                        path: 'market',
                        outlet: 'market',
                        component: NSEmptyOutletComponent,
                        loadChildren: '~/app/market/market.module#MarketModule'
                    },
                    {
                        path: 'list',
                        outlet: 'list',
                        component: NSEmptyOutletComponent,
                        loadChildren: '~/app/list/list.module#ListModule'
                    },
                    {
                        path: 'search',
                        outlet: 'search',
                        component: NSEmptyOutletComponent,
                        loadChildren: '~/app/search/search.module#SearchModule'
                    },
                    {
                        path: 'insight',
                        outlet: 'insight',
                        component: NSEmptyOutletComponent,
                        loadChildren: '~/app/insights/insights.module#InsightsModule'
                    },
                    {
                        path: 'explore',
                        outlet: 'explore',
                        component: NSEmptyOutletComponent,
                        loadChildren: '~/app/explore/explore.module#ExploreModule'
                    }
              ]}
            ])
  ...
  </code></pre>
  
  <p>and finally one of the 5 routing modules, lets go with list-routing.module.ts:</p>
  
  <pre><code>...
  const routes: Routes = [
      { path: '', redirectTo: 'list' },
      { path: 'list', component: ListComponent },
      { path: 'all', component: ListListComponent }
  ]
  ...
  </code></pre>
  
  <p>I think I'm getting mixed up because of the tabs coming in only after you pass the login screen. After a successful login, I'm doing:</p>
  
  <pre><code>this.router.navigate(['tabs/def'], {
                          transition: {
                            name: 'fade',
                            duration: 100,
                            curve: 'linear'
                          },
                          clearHistory: true
                      }
  </code></pre>
  
  <p>this does get me into the market outlet, displaying my 'home' screen. And then if I do click on one of the tabs using:</p>
  
  <p>tabs.component.html:</p>
  
  <pre><code>&lt;TabView class="fal" style="font-size: 20; padding: 3;" &gt;
      &lt;page-router-outlet *tabItem="{title: 'home'}" name="market"&gt;&lt;/page-router-outlet&gt;
      &lt;page-router-outlet *tabItem="{title: 'clipboard-list'}" name="list"&gt;&lt;/page-router-outlet&gt;
      &lt;page-router-outlet *tabItem="{title: 'search'}" name="search"&gt;&lt;/page-router-outlet&gt;
      &lt;page-router-outlet *tabItem="{title: 'lightbulb'}" name="explore"&gt;&lt;/page-router-outlet&gt;
      &lt;page-router-outlet *tabItem="{title: 'newspaper'}" name="insight"&gt;&lt;/page-router-outlet&gt;
  &lt;/TabView&gt;
  </code></pre>
  
  <p>I am then taken to the correct outlet. Here is where the problem is: List Component will load fine, but once I click on one of my lists, to get to ListListComponent, it tells me:</p>
  
  <pre><code>Error: Cannot match any routes. URL Segment: 'tabs/def'
  </code></pre>
  
  <p>The way I'm setting up this last navigation is:</p>
  
  <pre><code>this.router.navigate( [ { outlets: { list: [ '/all' ] } }], { relativeTo: this.route })
  </code></pre>
  
  <p>I've tried several combinations of passing in a URL of 'tabs/def/all' or 'tabs/def' with no success. As I understand it, I pass a URL at the beginning, but now that I'm nested, I should just go across the outlet. So is my syntax just way off on this last router.navigate?</p>
  
  <p>Thank you so much for your help!!</p>