Memuat Halaman Angular sesuai Kebutuhan dengan Lazy Routing

Halaman dashboard tidak selalu dibutuhkan saat pengguna pertama kali membuka daftar artikel. Dengan lazy routing, kode halaman dapat dimuat ketika route tersebut dikunjungi.

Siapkan dua standalone component, ArticlesPage dalam articles-page.ts dan DashboardPage dalam dashboard-page.ts. Masing-masing cukup memiliki template sederhana untuk percobaan. Di bawah ini, array route diletakkan pada direktori yang sama dengan dua file halaman itu.

Contoh implementasi

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'articles' },
  {
    path: 'articles',
    loadComponent: () => import('./articles-page').then(m => m.ArticlesPage),
  },
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard-page').then(m => m.DashboardPage),
  },
  { path: '**', redirectTo: 'articles' },
];

// In app.config.ts, merge this provider with your existing providers:
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

<!-- Root component template; import RouterLink and RouterOutlet there. -->
<nav>
  <a routerLink="/articles">Articles</a>
  <a routerLink="/dashboard">Dashboard</a>
</nav>
<router-outlet />

Cara memeriksa

Buka tab Network pada browser, kunjungi daftar artikel, kemudian dashboard. Perhatikan pemuatan chunk halaman. Detail chunk bergantung pada build dan konfigurasi preloading.

Letakkan wildcard paling akhir agar route khusus punya kesempatan cocok lebih dahulu. pathMatch: 'full' membatasi redirect dari path kosong. Pada produksi, web server perlu mengarahkan URL aplikasi yang valid ke halaman awal SPA. Lazy loading tidak membatasi akses data; endpoint dashboard tetap membutuhkan pemeriksaan autentikasi dan otorisasi di server.

Referensi

Dokumentasi resmi