Is there any way we can use lazy loading in the routing module of the file in which we are using <router-outlet>?

Question

I am making a page in angular v12 and i am using router outlet in one of my component so that it can be reused. There is a property (output emitter) of router-outlet known as activate that get triggered and for that, you have to load the componenet but i have many components and for a single component i have to load other components too thich is making my page heavy..... so i just need an alternate of it or any work around that would work

i am currently writing the code as

html..

' <router-outlet #activityConfig name="activityConfig"
                    (activate)="activityConfigComponentInit($event)"></router-outlet>'

routing.module.ts ....

const routes: Routes = [
    {
        path: 'activity',
        component: CreateComponent,
        children: [
            {
                path: menu page,
                children: [
                    {
                        path: 'create',
                        component: MenuPageComponent2,
                        outlet: 'activityConfig'
                    },
                    {
                        path: 'update',
                        component: MenuPageComponent2,
                        outlet: 'activityConfig'
                    },
                ], data: { activityKeyID: "MenuPageComponent2" }
            },]}]

and i want the code to be like

html..

' <router-outlet #activityConfig name="activityConfig"
                    (activate)="activityConfigComponentInit($event)"></router-outlet>'

routing.module.ts

const routes: Routes = [
    {
        path: 'activity',
        component: CreateComponent,
        children: [
                 {
                path: ActivityKeyIDEnum.MOBILE_COMBUSTION,
                children: [
                    {
                        path: 'create',
                        loadChildren:() => import ('../dashboard/menupage.menupage.module') .then(m=>m.MenuPageModule2),
                         outlet: 'activityConfig'
                    },
                    {
                        path: 'update',
                        // loadChildren:() =>import ('../dashboard/menupage.menupage.module') .then(m=>m.MenuPageModule2),
                        outlet: 'activityConfig'
                    },
                ], data: { activityKeyID:"MenuPageComponent2" }
            },]}]

MenuPageModule.ts

import { NgModule } from '@angular/core';
import { CommonModule} from '@angular/common';

import {FormsModule,ReactiveFormsModule,} from '@angular/forms';

import { MatCardModule } from '@angular/material/card';
import {MatRadioModule} from '@angular/material/radio';
import { MatInputModule } from '@angular/material/input';
import { CreateUpdateComponent } from './create-update.component';
import { MenuPageRoutingModule } from './menu-page-routing.module';
import { MatFormFieldModule } from '@angular/material/form-field';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { MatSelectModule } from '@angular/material/select';
@NgModule({
  declarations: [
    CreateUpdateComponent
  ],
  imports: [
    CommonModule,
    CreateUpdateRoutingModule,
    MatCardModule,
    MatRadioModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatFormFieldModule,
    NgxMatSelectSearchModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class MenuPageModule { }

MenuPageRoutingModule.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CreateUpdateComponent } from './create-update.component';

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

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