Angular routing patterns including lazy loading, loadComponent, loadChildren, and route configuration. Use when creating or modifying route files (.routes.ts).
Routing patterns for Angular applications.
Use loadChildren for feature modules and loadComponent for individual routes.
// src/app/app.routes.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{ path: 'seeds', loadChildren: () => import('./pages/seeds/seeds.routes').then(m => m.seedsRoutes) },
{ path: 'cards', loadChildren: () => import('./pages/cards/cards.routes').then(m => m.cardsRoutes) },
{ path: 'settings', loadChildren: () => import('./pages/settings/settings.routes').then(m => m.settingsRoutes) },
{ path: '', loadChildren: () => import('./pages/home/home.routes').then(m => m.homeRoutes) },
{ path: '**', redirectTo: '/' },
];
Each feature has its own route file with typed Routes array.
// src/app/pages/cards/cards.routes.ts
import { Routes } from '@angular/router';
export const cardsRoutes: Routes = [
{
path: '',
title: 'Cards - Akker',
loadComponent: () => import('./cards-page.component').then(m => m.CardsPageComponent),
},
];
Use the title property for page titles.
export const cardsRoutes: Routes = [
{
path: '',
title: 'Cards - Akker',
loadComponent: () => import('./cards-page.component').then(m => m.CardsPageComponent),
},
];
export const homeRoutes: Routes = [
{
path: '',
title: 'Akker',
loadComponent: () => import('./home-page.component').then(m => m.HomePageComponent),
},
];
export const settingsRoutes: Routes = [
{
path: '',
title: 'Settings - Akker',
loadComponent: () => import('./settings-page.component').then(m => m.SettingsPageComponent),
},
{
path: 'sync',
title: 'Sync - Akker',
loadComponent: () => import('./sync/sync.component').then(m => m.SyncComponent),
},
];
export const routes: Routes = [
{
path: 'admin',
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent) },
{ path: 'users', loadComponent: () => import('./users.component').then(m => m.UsersComponent) },
],
},
];
// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withHashLocation } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes, withHashLocation())],
};
src/app/
├── app.routes.ts # Root routes
├── app.config.ts # Router provider config
└── pages/
├── cards/
│ ├── cards.routes.ts
│ └── cards-page.component.ts
├── home/
│ ├── home.routes.ts
│ └── home-page.component.ts
├── seeds/
│ ├── seeds.routes.ts
│ └── seeds-page.component.ts
└── settings/
├── settings.routes.ts
└── settings-page.component.ts
src/app/app.routes.ts - Root route configurationsrc/app/app.config.ts - Router provider setupsrc/app/pages/cards/cards.routes.ts - Feature route examplesrc/app/pages/settings/settings.routes.ts - Feature with nested routes