Введение:
В этой статье мы рассмотрим концепцию ленивой загрузки в Angular с примером для вашего понимания.
Ленивая загрузка:
Вместо того чтобы загружать все модули и компоненты приложения, она позволяет загружать только выбранные модули и компоненты, тем самым сокращая время загрузки. Функция ленивой загрузки загружает компоненты, модули и другие файлы приложения Angular только тогда, когда это необходимо. Эта концепция используется в сложных и больших приложениях. Концепция ленивой загрузки делает приложение очень быстрым и использует меньше памяти.
Давайте рассмотрим один пример ленивой загрузки,
Например:
Для простоты понимания мы начнем с создания нового приложения Angular,
Шаг-1: Откройте командную строку или терминал. Создайте новый проект,
> ng new LazyDemo
обязательно разрешите маршрутизацию при создании нового проекта или вы можете просто использовать команду : > ng new LazyDemo — маршрутизация
> cd LazyDemo
Шаг-2: Создайте 3 компонента или любое количество по вашему выбору, просто для демонстрации я создаю 3 компонента,
> ng generate component Number1
ng generate component Number2
ng generate component Number3
Шаг-3 : Создайте соответствующие файлы модулей в папках каждого из компонентов,
> Number1.module.ts
Number2.module.ts
Number3.module.ts
Теперь наша структура файлов/папок будет выглядеть следующим образом,
Шаг-4 : Создайте соответствующий файл модуля маршрутизатора в каждой папке компонента,
> Number1-routing.module.ts
Number2-routing.module.ts
Number3-routing.module.ts
Шаг-5 : Импортируйте модуль маршрутизатора в основной модуль приложения app.module.ts,
import { AppRoutingModule } from './app-routing.module';
imports: [
BrowserModule,
AppRoutingModule
],
Поскольку мы включили маршрутизацию в начале, она уже будет импортирована в app.module.ts, В случае, если вы забыли применить маршрутизацию в начале, вы можете добавить это, в противном случае вы можете пропустить этот шаг.
Шаг 6: Добавьте код в их собственные модули маршрутизации, добавьте следующий код в Number1-routing.module.ts,
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Number1Component } from "./number1.component";
const routes: Routes = [
{ path:"", component: Number1Component }
];
@NgModule({
exports: [RouterModule],
imports:[RouterModule.forChild(routes)]
})
export class Number1RouterModule{}
Здесь вместо forRoot мы использовали forChild, так как это дочерние модули, которые будут вызываться в главном модуле маршрутизации приложения.
Аналогично добавьте коды в Number2-routing.module.ts и Number3-routing.module.ts.
В Number2-routing.module.ts добавьте следующие коды,
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Number2Component } from "./number2.component";
const routes: Routes = [
{ path:"", component: Number2Component }
];
@NgModule({
exports: [RouterModule],
imports:[RouterModule.forChild(routes)]
})
export class Number2RouterModule{}
В Number3-routing.module.ts добавьте следующие коды,
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Number3Component } from "./number3.component";
const routes: Routes = [
{ path:"", component: Number3Component }
];
@NgModule({
exports: [RouterModule],
imports:[RouterModule.forChild(routes)]
})
export class Number3RouterModule{}
В Number1.module.ts добавьте следующий код,
import { NgModule } from "@angular/core";
import { Number1RouterModule } from "./Number1-routing.module";
import { Number1Component } from "./number1.component";
@NgModule({
declarations:[Number1Component],
imports:[Number1RouterModule],
providers: []
})
export class Number1Module{
}
Аналогично добавьте то же самое в два других файла Number2.module.ts и Number3.module.ts,
В Number2.module.ts добавьте следующий код,
import { NgModule } from "@angular/core";
import { Number2RouterModule } from "./Number2-routing.module";
import { Number2Component } from "./number2.component";
@NgModule({
declarations:[Number2Component],
imports:[Number2RouterModule],
providers: []
})
export class Number1Module{
}
В Number3.module.ts добавьте следующий код,
import { NgModule } from "@angular/core";
import { Number3RouterModule } from "./Number3-routing.module";
import { Number3Component } from "./number3.component";
@NgModule({
declarations:[Number3Component],
imports:[Number3RouterModule],
providers: []
})
export class Number3Module{
}
Шаг 7 : Определите маршруты с помощью атрибута loadChildred в главном модуле маршрутизации приложения. В главный модуль маршрутизации app-routing.module.ts добавьте следующий код,
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'number1',
loadChildren: () => import('../app/number1/Number1.module').then(x => x.Number1Module)
},
{
path: 'number2',
loadChildren: () => import('../app/number2/Number2.module').then(x => x.Number2Module)
},
{
path: 'number3',
loadChildren: () => import('../app/number3/Number3.module').then(x => x.Number3Module)
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers:[]
})
export class AppRoutingModule { }
Для справки: https://stackoverflow.com/a/70354559/16487734.
Мы определим дочерние модули в атрибуте loadChildren, определив импорт и имя каждого независимого модуля и путь к нему.
Шаг 8 : Добавьте ссылки маршрутизации на HTML-страницу Route, В app.component.html добавьте следующее,
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h2>
{{ title }}
</h2>
<button><a [routerLink]="['/number1']" routerLinkActive="router-link-active" >Number One</a></button><span></span>
<button><a [routerLink]="['/number2']" routerLinkActive="router-link-active" >Number Two</a></button><span></span>
<button><a [routerLink]="['/number3']" routerLinkActive="router-link-active" >Number Three</a></button>
</div>
<router-outlet></router-outlet>
Теперь запустите приложение с помощью ng serve
Вывод:
Вы можете проверить работу этой ленивой загрузки с помощью инспекции, для этого нажмите Ctrl+shift+I. Теперь на вкладке Networks вы можете увидеть, что компоненты не загружаются изначально. 
Теперь, если вы нажмете на кнопку компонента номер один, загрузится только этот компонент, 
Если вы нажмете на кнопку компонента номер два, то загрузится и этот компонент,
Резюме:
Это действительно уменьшает занимаемую память, загружая только необходимые ресурсы, и применяется в больших приложениях. Компоненты загружаются после того, как мы нажимаем на ссылку, они не загружаются при инициализации или запуске приложения. Надеюсь, эта статья будет полезна для вас примерами и простыми определениями.
**Thank you! 😎**