Angular框架中使用路由懒加载

在项目的开发过程中，针对一些不常用到的模块组件，就不需要在项目启动时就去加载这些模块组件，反之，可以使用路由懒加载，在用到了这些模块的地方去进行路由的加载。

1、创建模块以及组件

• 创建模块：
  ng g m lazy-load --routing
• 模块下接着创建组件：
  ng g c lazy

2、lazy-load-routing.module.ts文件修改

pathMatch: 'full', redirectTo: 'lazy'是在路由转到''时，重定向到路由lazy。

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

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo:'lazy'},
  { path: 'lazy', component: LazyComponent }
];

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

3、lazy-load.module.ts文件修改

这个文件中将LazyLoadRoutingModule这个路由模块文件导入进去以及针对组件文件进行声明。

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

import { LazyLoadRoutingModule } from './lazy-load-routing.module';
import { LazyComponent } from './lazy/lazy.component';


@NgModule({
  declarations: [
    LazyComponent
  ],
  imports: [
    CommonModule,
    LazyLoadRoutingModule
  ]
})
export class LazyLoadModule { }

4、lazy.component.ts文件

懒加载路由模块的内容部分

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-lazy',
  template: `<p>懒加载模块测试<p>`
})
export class LazyComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

5、app-routing.module.ts文件

在根路由模块使用loadChildren懒加载导入路由模块

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

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/index/home' },
  { path: 'index', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
  { path: 'lazy', loadChildren: () => import('./pages/lazy-load/lazy-load.module').then(m => m.LazyLoadModule) }
];

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

image.png

根据展示的效果是可以看到 lazy路由是能够使用懒加载展示出来。