title: Angular 11 cannot route to named outlet
body: <p>We have a basic application with 2 tabs, each with its own named outlet</p>
  <pre><code>&lt;mat-tab-group&gt;
      &lt;mat-tab label=&quot;Tab1&quot;&gt;
          &lt;router-outlet name=&quot;tab1&quot;&gt;&lt;/router-outlet&gt;
      &lt;/mat-tab&gt;
      &lt;mat-tab label=&quot;Tab2&quot;&gt;
          &lt;router-outlet name=&quot;tab2&quot;&gt;&lt;/router-outlet&gt;
      &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  <p>One of the 2 named outlets just renders a component and that's fine. For the second one, we want to be able to route between different views so we created its own module and lazy load it.</p>
  <p>App routing looks like</p>
  <pre><code>const routes: Routes = [{
      path: '',
      children: [{
          path: '',
          redirectTo: '/home',
          pathMatch: 'full'
  
      }, {
          path: 'login',
          loadChildren: () =&gt; import('./login/login.module').then(m =&gt; m.LoginModule)
      },
      {
          path: 'home',
          loadChildren: () =&gt; import('./home/home.module').then(m =&gt; m.HomeModule)
      }]
  }]
  </code></pre>
  <p>Home page's routing looks like</p>
  <pre><code>const routes: Routes = [{
      path: '',
      component: HomeComponent,
      children: [{
          path: '',
          component: Tab1Component,
          outlet: 'tab1'
      }, {
          path: '',
          outlet: 'tab2',
          loadChildren: () =&gt; import('./tab2/tab2.module').then(m =&gt; m.Tab2Module)
      }]
  }];
  </code></pre>
  <p>Tab2Module is implemented as follows</p>
  <pre><code>const routes: Routes = [{
      path: '',
      component: Tab2Child1Component
  }, {
      path: 'tab2-child',
      outlet: 'tab2',
      component: Tab2Child2Component
  }]
  </code></pre>
  <p>Tab2Child1Component gets rendered fine but we cannot navigate to Tab2Child2Component.</p>
  <p>I am trying the following:</p>
  <pre><code>this.router.navigate([{ outlets: { tab2: 'tab2-child' } }], { relativeTo: this.route });
  </code></pre>
  <p>I can see in tracing that router is indeed trying to route to <code>/home/(tab2:tab2-child)</code> but in the end it just redirects back to <code>/home</code> with an error:</p>
  <pre><code> Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home'
  Error: Cannot match any routes. URL Segment: 'home'
  </code></pre>
  <p>Stackblitz showcasing the error:
  <a href="https://stackblitz.com/edit/angular-ivy-pv5jsi" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-pv5jsi</a></p>