Angular › Standalone Components

How do standalone components handle lazy loading differently from NgModule based lazy loading?

Intermediate

Answer

Instead of lazy loading an entire feature module, you can lazy load a single standalone component directly in your route configuration using loadComponent, letting you split your app into smaller, more granular pieces without needing a wrapping NgModule just for routing purposes.

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

Real-world example A settings page's code is only downloaded the first time a user actually navigates there, using loadComponent to lazy load that single standalone component directly, without needing a dedicated SettingsModule just to enable lazy loading.

Common follow-ups: What is the difference between loadComponent and loadChildren in the router configuration?;Does lazy loading a single component provide the same performance benefit as lazy loading an entire module?

Performance & Lazy Loading;NgModules & Modular Architecture