title: Angular and lazy loading: menu in a component, router-outer in other
body: <p>In my Angular app I have in main component a list of menu button, which opens several lazy loaded component. The code of the page is</p>
  
  <pre><code>&lt;button routerLink="/lazy-loaded-page"&gt;page&lt;/button&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>And the code of the routing file is </p>
  
  <pre><code>const routes: Routes = [
    { path: 'directory', loadChildren: () =&gt; import('./modules/directory/directory.module').then(m =&gt; m.DirectoryModule) },
  </code></pre>
  
  <p>The code works correctly; now, I want move the buttons menu in a header dedicated component. But the router outlet should stay in the main page. How can I, from a selection in a page x, load the component in an other router-outlet in the page y? </p>