title: Angular 2 Router - named router-outlet navigation from code
body: <p>Using  @angular/router": "3.4.7".</p>
  
  <p>Proposed solution <a href="https://stackoverflow.com/questions/39142396/angular-2-router-named-outlets">here</a> doesn't work anymore.</p>
  
  <pre class="lang-js prettyprint-override"><code>      /**
          The ProductComponent depending on the url displays one of two info 
           components rendered in a named outlet called 'productOutlet'.
         */
          @Component({
            selector: 'product',
            template: 
            ` &lt;router-outlet&gt;&lt;/router-outlet&gt;
              &lt;router-outlet name="productOutlet"&gt;&lt;/router-outlet&gt;
            `
          })
          export class ProductComponent{
           }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>@NgModule({
    imports: [
      CommonModule,
      RouterModule.forChild([
            {
              path: 'product',
              component: ProductComponent,
              children: [
                {
                  path: '',
                  component: ProductOverviewComponent,
                  outlet: 'productOutlet'},
                {
                  path: 'details',
                  component: ProductDetailsComponent,
                  outlet: 'productOutlet' }
              ]
            }
        ]
  
      )],
    declarations: [
      ProductComponent,
      ProductHeaderComponent,
      ProductOverviewComponent,
      ProductDetailsComponent
    exports: [
      ProductComponent,
      ProductHeaderComponent,
      ProductOverviewComponent,
      ProductDetailsComponent
    ]
  })
  export class ProductModule {
  
  }
  </code></pre>
  
  <p>Manual navigation works as expected</p>
  
  <p><code>http://localhost:5000/app/build/#/product-module/product</code>  (correctly displays overview component in named outlet)                     </p>
  
  <pre><code>http://localhost:5000/app/build/#/product-module/product/(productOutlet:details)
  </code></pre>
  
  <p>(correctly displays details component in named outlet)</p>
  
  <p><strong>THE PROBLEM</strong></p>
  
  <p>Cannot figure out the correct way to perform programatical navigation:</p>
  
  <pre><code>this.router.navigateByUrl('/(productOutlet:details)');
  
  this.router.navigate(['', { outlets: { productOutlet: 'details' } }]);
  </code></pre>
  
  <p>Following errors occur:</p>
  
  <p>Error: Cannot match any routes. URL Segment: 'details'.</p>