I’m working on an Angular application with lazy loading for the dashboard screen. I’ve encountered an issue where the submenu is not functioning properly when the dashboard is loaded lazily. Below is the relevant code and structure:

app-layout-component.html

<app-main-header></app-main-header>

<!-- Main Sidebar Container -->
<app-main-sidebar></app-main-sidebar>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <router-outlet></router-outlet>
</div>

<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
  <!-- Control sidebar content goes here -->
</aside>

<!-- Main Footer -->
<app-main-footer></app-main-footer>

app-routing.module.ts

onst routes: Routes = [
  {
    path: AppRoutes.login,
    component: LoginComponent,
  },
  {
    path: AppRoutes.newReg,
    component: NewRegistrationComponent,
  },
  {
    path: AppRoutes.forgotPass,
    component: RegisterRecoverComponent,
  },
  {
    path: '',
    component: AuthenticationComponent,
    canActivate: [defaultScreenGuard] // Navigate to login if QuickRegEnabled is set to false 
  },
  { 
    path: 'dashboard', 
    loadChildren: () => import('./shared/components/app-layout/app-layout.module').then(m => m.AppLayoutModule)
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

sub-menu code in main-header component

 <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="nav-icon fas fa-copy"></i>
            <p>
              Layout Options
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a  class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Top Navigation</p>
              </a>
            </li>
            <li class="nav-item">
              <a  class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Top Navigation + Sidebar</p>
              </a>
            </li>
            <li class="nav-item">
              <a  class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Boxed</p>
              </a>
            </li>
            <li class="nav-item">
              <a  class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Fixed Sidebar</p>
              </a>
            </li>
            <li class="nav-item">
              <a  class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Fixed Sidebar <small>+ Custom Area</small></p>
              </a>
            </li>
            <li class="nav-item">
              <a  class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Fixed Navbar</p>
              </a>
            </li>
            <li class="nav-item">
              <a  class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Fixed Footer</p>
              </a>
            </li>
            <li class="nav-item">
              <a  class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Collapsed Sidebar</p>
              </a>
            </li>
          </ul>
        </li>

When I navigate to the dashboard after a successful login, the submenu within the dashboard is not working. However, if I place the same code directly in app.component.html, it works fine. I am using adminlte template in this project.

Why is the submenu not working when the dashboard is loaded lazily? Is there something I might be missing in the lazy loading configuration or in the component structure?