Load Angular Pages on Demand with Lazy Routes

Readers do not always need dashboard code when they first open the article list. Lazy routing can load a page when its route is visited.

Create two standalone components: ArticlesPage in articles-page.ts and DashboardPage in dashboard-page.ts. Give each a simple template for this exercise. The route file below lives beside those two page files.

Implementation example

// 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 />

Check the result

Open the browser Network panel, visit articles, then visit the dashboard. Observe page chunks being loaded; exact chunk behavior depends on the build and preloading configuration.

Keep the wildcard last so specific routes match first. pathMatch: 'full' limits the empty-path redirect. In production, configure the web server to serve the SPA entry point for valid application URLs. Lazy loading does not authorize data access: dashboard endpoints still need server-side authentication and authorization.

Reference

Official documentation