In lazy loading page is not loading till i click on the content of the page in angular 14

Question

Hi Friends i had struct in this issue from past so many days below is my project structure the problem is that the page is not loading till i click on the website could anybody please help me out ?

my expecting is that the default that i had made in this module

loadChildren: () => import('./client-workspace/client-workspace.module').then(m => m.ClientWorkspaceModule),

need to be loading without any click as its the landing page

My Project structure is

app 
  - core
    core.module.ts
  - modules
    modules-routing.module.ts
    modules.module.ts  
  - shared
    shared.module.ts
  app-routing.module.ts
  app.component.html
  app.component.scss
  app.component.ts
  app.module.ts

app-routing :
 
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    component: ClientWorkspaceComponent,
    canActivate: [AuthGuard],
    canLoad: [AuthGuard],
    children: [
      {
        path: '',
        loadChildren: () => import('./modules/modules.module').then(m => m.ModulesModule),
      }
    ]
  }
]

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


modules.ts 

    const routes: Routes = [
      {
        path: '',
        canActivate: [AuthGuard],
        canLoad: [AuthGuard],
        loadChildren: () => import('./client-workspace/client-workspace.module').then(m => m.ClientWorkspaceModule),
      },
      {
        path: 'workspace',
        canActivate: [AuthGuard],
        canLoad: [AuthGuard],
        loadChildren: () => import('./workspace/workspace.module').then(m => m.WorkspaceModule)
      },
      {
        path: 'engageclient',
        canActivate: [AuthGuard],
        canLoad: [AuthGuard],
        loadChildren: () => import('./engage-client/engage-client.module').then(m => m.EngageClientModule)
      },
      {
        path:'craftpresentation',
        canActivate: [AuthGuard],
        canLoad: [AuthGuard],
        loadChildren:()=> import('./craft-presentation/craft-presentation.module').then(m=> m.CraftPresentationModule)
      },
      {
        path:'presentation',
        canActivate: [AuthGuard],
        canLoad: [AuthGuard],
        loadChildren:()=> import('./presentation/presentation.module').then(m=> m.PresentationModule)
      },
      {
        path:'admin',
        canActivate: [AuthGuard],
        canLoad: [AuthGuard],
        loadChildren:()=> import('./admin-workspace/admin-workspace.module').then(m=> m.AdminWorkspaceModule)
      }
    ]
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class ModulesRoutingModule { }

Answer 1

you need to do preloading of lazy loaded modules in the background once the main routing is loaded.

You can read this article :Angular Preloading Strategy