Wie ladet man Routen/Features in Angular verzögert (Lazy Loading)?

Question

Accepted Answer

**Lazy Loading** verzögert das Herunterladen des Codes einer Funktion, bis der Benutzer dorthin navigiert, anstatt alles in den initialen Download zu bündeln. Dies reduziert die anfängliche Bundle-Größe und beschleunigt das initiale Laden der App.

## Lazy Loading einer standalone Komponente (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),
  },
];
```

Das dynamische `import()` teilt dem Build-Tool mit, `AdminComponent` in sein eigenes Chunk zu trennen, das nur heruntergeladen wird, wenn der Benutzer `/admin` besucht.

## Lazy Loading einer Gruppe von Routen

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

`loadChildren` ladet verzögert einen gesamten Feature-Bereich (alle seine Routen/Komponenten) als ein Chunk — die Standard-Methode, um eine große App nach Features zu unterteilen.

## Die NgModule-basierte Form (ältere Codebasen)

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

## Warum es die Leistung verbessert

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

Benutzer laden nur das herunter, das sie tatsächlich besuchen — kritisch für große Enterprise-Apps mit vielen Feature-Bereichen, die ein bestimmter Benutzer nie öffnet.

## Preloading-Strategien (das Beste aus beiden)

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

Preloading lädt Lazy Chunks im Hintergrund nach dem App-Laden, sodass die anfängliche Bundle klein bleibt *und* spätere Navigation sich sofort anfühlt. Sie können auch benutzerdefinierte Strategien schreiben (z. B. nur wahrscheinliche nächste Routen preloaden).

## Warum es wichtig ist

Lazy Loading ist die primäre Technik, um Angulars initiales Bundle klein zu halten, während die App wächst — essentiell für die großen, Multi-Feature-Enterprise-Apps, auf die Angular abzielt.

Aufteilen nach Route/Feature (`loadComponent`/`loadChildren`) bedeutet schnellere initiale Ladevorgänge, und gepaart mit einer Preloading-Strategie ergibt sich sowohl ein schneller Start als auch geschmeidge Navigation.

Es ist eine Standard-, hochimpaktive Leistungspraxis in jeder bedeutsamen Angular-Anwendung.