How does routing work in Angular, and what are route guards and lazy loading?

The router maps URL paths to components. You declare routes as an array, and <router-outlet> marks where the matched component is rendered. Routes are matched in order, so specific paths must come before wildcards.

Lazy loading splits a feature into its own bundle, downloaded only when the route is first visited:

{ path: 'admin', loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES) }

This is the most effective single change you can make to initial load time in a large application.

Guards run before navigation completes and can allow it, block it, or redirect:

• CanActivate — may this user reach this route? The usual authentication and role check.
• CanActivateChild — the same for child routes.
• CanDeactivate — may the user leave? This is how you warn about unsaved changes.
• CanMatch — decides whether the route matches at all, which means the lazy bundle is never even downloaded if the user is not permitted. Better than CanActivate for role-gated features.
• Resolve — pre-fetch data before the component renders, avoiding a flash of an empty view.

Note: Guards are modern functional functions now rather than classes, and a guard is a convenience, never a security control — the server must enforce authorisation regardless.