title: How can I route programmatically to a named router outlet?
body: <p>UPDATE: You can now try this in a minimal sample on <a href="https://stackblitz.com/edit/angular-ivy-k7adhd?file=src/app/components/source/source.component.ts" rel="nofollow noreferrer">Stackblitz</a>.</p>
  <p>The first button navigates to the route without specifying an outlet and it works.</p>
  <p>The second button navigates to the <em>same</em> route as above, while specifying an outlet, but here, an exception is thrown implying that the route is unknown.</p>
  <hr />
  <p>I am looking at some code for an Angular 14 application. Its main component contains, among other content, this line:</p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>A &quot;button&quot; component shown somewhere in the application has a click handler that culminates in the following instruction:</p>
  <pre><code>this.router.navigate([targetRoute]);
  </code></pre>
  <p>Once I click said &quot;button&quot;, the area represented by <code>&lt;router-outlet&gt;</code> above is replaced with the component associated with <code>targetRoute</code>, while the other content in the main component remain visible. (<code>targetRoute</code> is a string of the form <code>'abc/def'</code>.)</p>
  <p>So far, so good.</p>
  <hr />
  <p>What I'd like to do now (for reasons irrelevant to this question) is, convert the router outlet into a named router outlet.</p>
  <p>For a start, I have decided to <em>add</em> a named router outlet. Hence, I have extended the main component to contain an additional, named, router:</p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;router-outlet name=&quot;contentArea&quot; style=&quot;width: 200px; height: 200px;&quot;&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>I can see this new router outlet as a blank area next to the first one, and clicking on the &quot;button&quot; still causes the first area to be filled with the component associated with <code>targetRoute</code>.</p>
  <p>Now, inspired by questions such as <a href="https://stackoverflow.com/questions/44517100">this one</a> or <a href="https://stackoverflow.com/questions/49916354">this one</a>, I have modified the instruction in the &quot;button&quot; to target the new named router outlet, all else equal (or is it?):</p>
  <pre><code>this.router.navigate([{
      outlets: {
          contentArea: [targetRoute]
      }
  }]);
  </code></pre>
  <p>With this change, I expect the component associated with <code>targetRoute</code> to appear in the new named router outlet.</p>
  <p><strong>Instead, nothing happens in the browser window and the console shows an exception:</strong></p>
  <blockquote>
  <p>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'abc%2Fdef'</p>
  </blockquote>
  <p>I have also tried passing <code>targetRoute</code> without being wrapped in an array above:</p>
  <pre><code>this.router.navigate([{
      outlets: {
          contentArea: targetRoute
      }
  }]);
  </code></pre>
  <p>But this just yields the same error, just without URL-escaping the route:</p>
  <blockquote>
  <p>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'abc/def'</p>
  </blockquote>
  <p><strong>What am I doing wrong?</strong></p>