Lazy Loading

Lehetővé teszi, hogy a komponenst vagy modult csak akkor töltsük be, amikor szükség van rá, nem pedig az alkalmazás indításakor. Ez segít optimalizálni az alkalmazás betöltési idejét és erőforrás-használatát.

Az alábbi lépésekkel implementálhatod a lazy loading-ot az Angular alkalmazásodban az általad megadott útvonalakhoz:

Angular 14-től rendelkezésre állnak a standalone komponensek, ami azt jelenti, hogy nincs szükség külön modul és routing fájlra. Az app routing-ban közvetlenül töltjük be a standalone komponenst :

Komponens

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

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.scss'],
  standalone: true,
  imports: [CommonModule],
})
export class ShoppingListComponent {}

app.routing.ts

{
  path: 'shopping-list',
  loadComponent: () => import('./modules/shopping-list/shopping-list.component').then((m) => m.ShoppingListComponent),
  title: 'Shopping List',
},