以登录模块为例

• 创建带路由的模块及组件

ng g m pages/login --routing

ng g c pages/login

src\app\pages\login\login-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login.component';

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

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

src\app\pages\login\login.module.ts

import { LoginRoutingModule } from './login-routing.module';

@NgModule({
  ...
  imports: [
    LoginRoutingModule,
  ],
  exports: [
    LoginComponent
  ]
})

到这login模块已经准备好了，
接下来修改根路由模块

src\app\router\app-routing.module.ts

export const mainRoutes: Routes = [
  {
    path: '',
    component: IndexComponent
  },
  {
    path: 'login',
    // 懒加载前
    // component: LoginComponent,	

	// 懒加载后
    loadChildren: () => import('../pages/login/login.module').then((x) => x.LoginModule)
  }
];

注意不要在src\app\app.module.ts里再引入Login组件和模块，
loadChildren就已经实现引入Login模块