懒加载的场景

应用在启动时，有些模块可能根本就用不上，比如在一个商场系统中，用户打开首页时，只需要向用户展示商品，支付模块此时根本没用，因此对于支付模块就可以使用懒加载。

• 优点：使用懒加载后，只加载必须的模块，因此首次加载的包体积大大减小，这样就可以加快应用的启动速度。
• 缺点：或者说懒加载还是不能解决的是，如果某一个懒加载的模块体积过大，当加载时还是可能发生加载速度慢的情况，用户的页面被阻塞，体验下降。

可见，懒加载解决了请求额外资源导致的性能消耗，加载速度过慢的问题。

以登录模块为例

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

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模块