title: Programmatic Router Navigation to Component with named router-outlet
body: <p>I have a nebulous problem concerning a <em>programmatically</em> router navigate within an component. I really searched a lot for helpful solutions but I didn't get it, unfortunately. To confess...I'm not an angular expert because I'm still learning.<br/>
  In short. I have an AppRoutingModule:<br/></p>
  
  <pre><code>....
  export const routes: Routes = [
    {
      path: '',
      redirectTo: 'search',
      pathMatch: 'full'
    },
    {
      path: 'search',
      component: SearchComponent,
      children: [
        {
          path: 'allgarchiv',
          component: AllgarchivComponent,
          outlet: 'search'
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>In summary I have two router-outlets, the primary one and one it's called "search" (s. above).</p>
  
  <p>During loading the SearchComponent (that works!) I want to route to path "allgarchiv" (s. above; router-outlet = "search") automatically.
  <br><br></p>
  
  <pre><code>import { AfterContentInit, AfterViewInit, Component, OnInit } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  
  @Component({
    selector: 'axa-search',
    template: `
      &lt;br&gt;
      &lt;ngb-tabset&gt;
          &lt;ngb-tab title="Suche" id="tab-search"&gt;
            &lt;ng-template ngbTabContent&gt;
          &lt;!--    &lt;a [routerLink]="[{ outlets: { search: ['allgarchiv'] } }]"&gt;Test_LoadRouter&lt;/a&gt;       --&gt;
              &lt;router-outlet name="search"&gt;&lt;/router-outlet&gt; 
            &lt;/ng-template&gt;
          &lt;/ngb-tab&gt;
          &lt;ngb-tab id="tab-list" [disabled]="false" title="Treffer"&gt;
            &lt;ng-template ngbTabContent&gt;TO FILL!!!&lt;/p&gt;
            &lt;/ng-template&gt;
          &lt;/ngb-tab&gt;
      &lt;/ngb-tabset&gt;
     `,
    styles: []
  })
  export class SearchComponent implements AfterContentInit {
  
    constructor(private router: Router, private route: ActivatedRoute) { }
  
    ngAfterContentInit() {
  //    this.router.navigate( ['allgarchiv', { outlets: { search: { relativeTo: this.route }}}] );    
      this.router.navigate( [{ outlets: { search: ['allgarchiv']}}]  );    
    }
  }
  </code></pre>
  
  <p>But this doesn't work. I get following error:<br></p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error: Cannot match any routes.
    URL Segment: 'allgarchiv' Error: Cannot match any routes. URL Segment:
    'allgarchiv'</p>
  </blockquote>
  
  <p>If you have a look within the Template I also tried this by first click on a Router-Link (Test_LoadRouter; currently comment). And this works like a charm!!<br/> 
  My question is how I could navigate to the router programmatically from SearchComponent? <br>
  I also tried different lifecyle-hooks but without any results and the same error.<br><br>
  Any help is really appreciate. Many thanks in advance.</p>