title: Angular: How to use multiple router-outlets?
body: <p>I have a component like this</p>
  
  <p><strong>main page:</strong></p>
  
  <pre><code>&lt;div&gt; 
   &lt;a routerLink="alpha"&gt; Alpha &lt;/a&gt;
   &lt;a routerLink="beta"&gt; Beta &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  
  &lt;footer&gt;&lt;/footer&gt;
  </code></pre>
  
  <p><strong>beta template:</strong>  </p>
  
  <pre><code>&lt;div&gt;
   &lt;a routerLink="/actual"&gt;actual&lt;/a&gt;
   &lt;a routerLink="/archive"&gt;archive&lt;/a&gt;
  &lt;div&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>The possible scenario is:</strong>
  When you click BETA button on the home page, it brings up the router-outlet beta template in the home.
  but the router-outlet in the beta template is empty. when I click on the links in the beta template, it will bring the component.</p>
  
  <p>When the BETA link on the home page is clicked, the router-outlet in the beta page does not come up empty and the actual incoming component is clicked.</p>