Why should you care?

Enterprise apps have deep linkable screens; routing also drives lazy loading and guards.

See it live — copy this example

Paste into your MeanVerse project (Angular + Express + MongoDB), then run with ng serve / node / mongosh as noted.

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  {
    path: 'accounts',
    loadComponent: () => import('./features/accounts/account-list.component')
      .then(m => m.AccountListComponent),
    canActivate: [authGuard]
  },
  { path: '**', component: NotFoundComponent }
];

What happened?

• loadComponent lazy-loads code on first visit.
• authGuard blocks unauthenticated users.
• Wildcard route catches unknown URLs.

Practice next

1. Define routes in app.routes.ts with provideRouter in main.ts.
2. Add routerLink in navbar to accounts.
3. Create authGuard that checks AuthService.isLoggedIn().
4. Add child route accounts/:id for detail view.
5. Pass account id via route param and resolver.

Remember

Routes = URL to component map. Lazy load heavy MeanVerse features. Guards protect sensitive banking screens.

Role-based menus

Tellers see /cashier routes; admins see /audit — same app, different guards.

Outcome: Router enforces URL-level access before component loads.