title: How to use two router outlets for same path using Angular 5
body: <p>I have the following template for <code>AppComponent</code>:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div&gt;
          &lt;router-outlet name="menu"&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;router-outlet name="main"&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to use this template in two cases:</p>
  
  <ul>
  <li>when I navigate to <code>/page1</code>, I want <code>menu</code> outlet to contain <code>Menu1Component</code> and <code>main</code> outlet to contain <code>Main1Component</code></li>
  <li>when I navigate to <code>/page2</code>, I want <code>menu</code> outlet to contain <code>Menu2Component</code> and <code>main</code> outlet to contain <code>Main2Component</code></li>
  </ul>
  
  <p>I don't understand how children and named outlets works.
  What should be my routes in module imports?</p>
  
  <p>I use Angular 5.</p>