title: Angular routerLink with lazy loading
body: <p>I apologize if this question has been answered. I haven't found a problem like mine.</p>
  
  <p>I have an angular app that has two 'pages'. Pages = normal components with modules. 
  And I have a bunch of 'components' that are connected in one module.
  ( Here is the file structure - <a href="https://i.imgur.com/fs6tXgg.png" rel="nofollow noreferrer">https://i.imgur.com/fs6tXgg.png</a> )</p>
  
  <p>Now, in the <code>app-routing.module</code>, I use lazy loading to load the two pages. Like this:</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      loadChildren: () =&gt; import('./pages/user/user.module').then(mod =&gt; mod.UserModule)
    },
    {
      path: '',
      loadChildren: () =&gt; import('./pages/admin/admin.module').then(mod =&gt; mod.AdminModule)
    }
  ];
  </code></pre>
  
  <p>This works well. In the user page I load the main-menu component.  <code>..&lt;app-main-menu&gt;&lt;/aapp-main-menu&gt;...</code></p>
  
  <p><strong>PROBLEM</strong> - But now, I want to add <code>routerLink="/hotels</code> to a button in the main-menu component, in the user-page, so when the user clicks the button the page will load a different component, item-list. (not main-menu)</p>
  
  <p>I tried adding a new path in the <code>app-routing.module.ts</code>:</p>
  
  <pre><code>  {
      path: 'item-list',
      component: ItemListComponent
    }
  </code></pre>
  
  <p>But I get an error saying that </p>
  
  <blockquote>
    <p>Component MainMenuComponent is not part of any NgModule or the module has not been imported into your module.</p>
  </blockquote>
  
  <p>The reason for this error is because the item-list.component is loaded into the user-components.module.ts, which is called in the user.module.ts (main module that the page loads).</p>
  
  <p>So the global question is: How can I set a routerLink to a component when using Lazy Loading (Because the component I want is declared in a specific module).</p>