Hoe laad je routes/features lazy in Angular?

Question

Accepted Answer

**Lazy loading** stelt het downloaden van code van een feature uit tot de gebruiker ernaar navigeert, in plaats van alles in de eerste download in te pakken. Dit verkleint de initiële bundle en versnelt het eerste laadproces van de app.

## Lazy-loading van een standalone component (modern)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (in main bundle)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — separate chunk
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

De dynamische `import()` vertelt het buildgereedschap om `AdminComponent` in zijn eigen chunk op te splitsen, die alleen wordt gedownload wanneer de gebruiker `/admin` bezoekt.

## Lazy-loading van een groep routes

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // load a whole feature's routes
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` laadt lazy een heel functiegebied (alle bijbehorende routes/componenten) als één chunk — de standaardmanier om een grote app per functie in te delen.

## Het NgModule-gebaseerde formulier (oudere codebases)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## Waarom het belangrijk is

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

Gebruikers downloaden alleen wat ze daadwerkelijk bezoeken — cruciaal voor grote enterprise-apps met veel functiegebieden, waarvan de meeste een bepaalde gebruiker nooit opent.

## Preloading-strategieën (het beste uit beide werelden)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// load lazy chunks in the background AFTER initial load, so navigation is instant
```

Preloading haalt lazy chunks op de achtergrond op nadat de app is geladen, zodat de initiële bundle klein blijft *en* later navigeren voelt instant. Je kunt ook aangepaste strategieën schrijven (bijv. alleen waarschijnlijk volgende routes preloaden).

## Waarom het belangrijk is

Lazy loading is de primaire techniek om de initiële bundle van Angular klein te houden terwijl de app groeit — essentieel voor de grote, multi-functie enterprise-apps die Angular richt.

Splitsen op route/functie (`loadComponent`/`loadChildren`) betekent snellere eerste laden, en gecombineerd met een preloading-strategie geeft zowel een snelle start als snelle navigatie.

Het is een standaard, high-impact prestatiepraktijk in elke aanzienlijke Angular-toepassing.