Lazy-Loading Routing in Angular10

Ask Time：2021-02-25T15:21:56 Author：Aditya Parida

If anybody tried to write lazy-loading like this and got success please help, I'm facing issues over here. I've created an angular app and tried to use lazy-loading but it didn't help me.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {EmployeeComponent} from './employee/employee.component';
import {RegistrationComponent} from './registration/registration.component';

const routes: Routes = [
                        {
                            path:'',
                            component:EmployeeComponent
                        },
                        {
                            path:'employee/registration',
                            component: RegistrationComponent
                        }
                        ]

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

this is my code what looks like and i tied to route in app like:

const routes: Routes = [
    {
        path: '',
        component: LayoutComponent,
        children: [
            {
                path: '',
                component: EmployeeComponent
            },
            {
                path: 'employee',
                loadChildren: () => import('./hr/hr.module').then(m => m.HrModule)
            }
]

i just created a sub-folder named hr and in that hr i added two other folder like employee and registration but in hr-routing-module.ts file i just added above one code and in hr-module file & the components in same as well and in app-routing.ts file i just added the below code. so is it correct way to connect or i've to declare all components separately?

Author:Aditya Parida，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/66364013/lazy-loading-routing-in-angular10

Lazy-Loading Routing in Angular10