# Lazy Loading — Angular

Source: https://www.geekswithgeeks.com/en/angular/ng-lazy-loading

> Load a route's component only when it's visited.

## loadComponent

`loadComponent` dynamically imports a standalone component, splitting it into its own JS chunk that only loads when the route is visited.

```typescript
export const routes: Routes = [
  {
    path: 'settings',
    loadComponent: () =>
      import('./settings/settings.component').then(m => m.SettingsComponent),
  },
];
```

## Why it matters

Lazy loading keeps the initial bundle small — rarely-visited pages (settings, admin panels) don't slow down the first page load.

**Quiz:** What is the main benefit of `loadComponent` over a plain `component` route?

- [ ] It skips route parameters
- [x] It splits the component into a separate chunk loaded on demand
- [ ] It disables the router outlet

*Answer:* It splits the component into a separate chunk loaded on demand. The component code is only downloaded once the user actually navigates to that route.