带有延迟加载的 Angular routerLink

Question

I apologize if this question has been answered. I haven't found a problem like mine.

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 - https://i.imgur.com/fs6tXgg.png )

Now, in the app-routing.module , I use lazy loading to load the two pages. Like this:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/user/user.module').then(mod => mod.UserModule)
  },
  {
    path: '',
    loadChildren: () => import('./pages/admin/admin.module').then(mod => mod.AdminModule)
  }
];

This works well. In the user page I load the main-menu component. ..<app-main-menu></aapp-main-menu>...

PROBLEM - But now, I want to add routerLink="/hotels 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)

I tried adding a new path in the app-routing.module.ts :

  {
    path: 'item-list',
    component: ItemListComponent
  }

But I get an error saying that

Component MainMenuComponent is not part of any NgModule or the module has not been imported into your module.

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).

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).

Answer 1

Kinda fixed the problem by calling the module that has the component in the app-routing.module.ts

  {
    path: 'list',
    loadChildren: () => import('./components/user-components/user-components.module').then(mod => mod.UserComponentsModule)
  }

The user.module has:

const routes: Routes = [
  {
    path: '',
    component: UserComponent
  }
];

...
  imports: [
    RouterModule.forChild(routes)
  ]