Kif tieħel mill-qiegħ ir-routes/features f'Angular?

Question

Accepted Answer

**Tiegħel mill-qiegħ** tirrifjuta l-downloads tal-kodiċi ta' feature sa meta l-user jinnaviga għaliha, minflok li tgħaqqad kollox fil-download inizjali. Dan inaqqas il-bundle inizjali u jaċċellera l-ewwel tagħbija tal-app.

## Tiegħel mill-qiegħ ta' komponent standalone (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),
  },
];
```

L-`import()` dinamiku jgħid lit-tool tal-bini biex aqsam `AdminComponent` fil-ġestjoni tiegħu stess, imniżżel biss meta l-user jżur `/admin`.

## Tiegħel mill-qiegħ ta' grupp ta' 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` tieħel mill-qiegħ ż-żona ta' feature sħiħa (ir-routes/komponenti kollha) bħala ġestjoni waħda — il-mod standard biex taqsam app kbira skond feature.

## Il-forma bbażata fuq NgModule (codebases eqdem)

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

## Għaliex hu importanti

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

L-users niżżlu biss dak li tabilħadd jivvizitaw — kritiku għal apps enterprise kbar b'ħafna żoni ta' feature, l-aktar li user partikolari qatt ma jiftaħ.

## Strateġiji ta' preloading (l-aħjar miż-żewj)

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

Il-preloading jissielet il-ġestjonijiet tiegħel-qiegħ fil-background wara li l-app tattaħmil, allura l-bundle inizjali jibqa' żgħir *u* in-navigazzjoni aktar tard tħoss istantanja. Tista' wkoll tikteb strateġiji personalizzati (eż. preload biss ta' routes ta' probabbiltà li ġejja).

## Għaliex hu importanti

It-tiegħel mill-qiegħ hu t-teknika primarja biex iżżomm il-bundle inizjali ta' Angular żgħir hekk kif l-app tikber — essenzjali għal apps enterprise kbar multi-feature li Angular target.

L-qsim skond route/feature (`loadComponent`/`loadChildren`) jfisser tagħbija ewwela aktar mgħaggla, u jgħaqqad ma' strateġija ta' preloading jagħti kemm bidu mgħaggal kif navigazzjoni tajba.

Hija prattika ta' prestazzjoni standard u ta' impatt għoli f'kwalunkwe applikazzjoni Angular ta' daqs ragionevoli.