Angular 6|7|8 Router: Lazy Loading Modules Tutorial - LoadChildren() Example

Trong hướng dẫn này, chúng ta sẽ thấy ví dụ Angular 6 | 7 | 8 định tuyến và các thành phần Lazy Loading Modules bằng cách sử dụng các Router Module và phương thức loadChildren ().

Các mô-đun Lazy Loading trong Angular 7 cho phép các ứng dụng chỉ tải các mô-đun khi cần thiết, tức là khi bạn lần đầu tiên truy cập (các) tuyến đường tương ứng với (các) thành phần thuộc mô-đun được Lazy Loading. Điều này có nhiều lợi ích trên ứng dụng Angular 7 của bạn như hiệu suất và kích thước.

Để thêm Lazy Loading trong ứng dụng Angular 6 của bạn, bạn cần thiết lập định tuyến để sử dụng phương thức loadChildren () và thêm các thành phần mà bạn muốn tải bên trong các mô-đun tính năng, ví dụ bên ngoài mô-đun ứng dụng chính app-main.module.ts.

Tạo một dự án Angular 7

Chúng tôi giả sử bạn đã cài đặt Angular CLI 7. Bây giờ, bạn có thể tạo một dự án bằng lệnh sau:

ng new angular7Router

Tạo mô-đun tính năng
Bây giờ chúng ta cần tạo một mô-đun tính năng bằng lệnh sau:

$ ng g module lazymodule

Chúng tôi cũng cần tạo các thành phần bên trong mô-đun tính năng của mình:

$ ng g c lazymodule/component1
$ ng g c lazymodule/component2
$ ng g c lazymodule/component3

Các lệnh này sẽ tạo ra ba thành phần bên trong mô-đun lazymodule.

Sử dụng loadChildren ()

Trong tệp định tuyến chính app-routing.module.ts, bạn cần sử dụng phương thức loadChildren () để Lazy Loading Modules Tutorial tính năng:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'lazymodule', loadChildren: './lazymodule/lazymodule.module#LazyModuleModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Phương thức loadChildren () lấy đường dẫn đến mô-đun, được thêm vào # được gắn vào tên lớp mô-đun.

Các thành phần định tuyến bên trong Module tính năng

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

import { Component1Component } from './component1/component1.component';
import { Component2Component } from './component2/component2.component';
import { Component3Component } from './component3/component3.component';
const routes: Routes = [
    { path: '', component: Component1Component },
    { path: 'component2', component: Component2Component },
    { path: 'component3', component: Component3Component },
];
@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  declarations: [Component1Component,Component2Component,Component3Component]
})
export class LazyModuleModule {}

Trong mô-đun tính năng, chúng tôi bao gồm các tuyến đường với phương thức forChild () của RouterModule thay vì phương thức forRoot ().

Phần kết luận
Trong hướng dẫn này, chúng ta đã thấy Lazy Loading Modules Tutorial với bộ định tuyến Angular 6 bằng cách sử dụng các mô-đun tính năng và phương thức loadChildren ().