Angular Router enables navigation between views. Core features include: path-based routing, child routes, route parameters, guards, lazy loading, route resolvers, navigation events, and location strategies. Configured in RouterModule using Routes array.
Route guards control route access/behavior. Types: CanActivate (access control), CanDeactivate (leaving control), CanLoad (lazy loading control), CanActivateChild (child route access), Resolve (pre-fetch data). Implement as services using specific interfaces.
Route parameters pass data through URL. Types: Required parameters (:id), Optional parameters (?id=), Query parameters (?key=value). Accessed using ActivatedRoute service through params, queryParams, or paramMap observables.
Resolvers pre-fetch data before route activation. Implement Resolve interface in service. Use cases: loading required data before showing view, preventing partial/loading views, handling dependencies. Returns data/observable/promise.
Child routes create hierarchical route structures. Configured using children property in route configuration. Requires router-outlet in parent component. Enables feature modules, nested routing, and component reuse.
Location strategies: PathLocationStrategy (default, uses HTML5 History API, clean URLs), HashLocationStrategy (uses hash URLs). Configure in RouterModule.forRoot() options. Affects URL format and server configuration requirements.
paramMap is newer, immutable, provides has()/get() methods. params is older, direct object access. paramMap recommended for type safety and null checking. Both available as observable and snapshot.
Absolute paths start with '/', relative paths based on current route. Relative navigation uses '../' for parent routes. Choose based on navigation context. Affects route configuration and navigation methods.
Redirects configured using redirectTo property in route definition. Support path matching, parameters. Used for default routes, URL normalization. Can be absolute or relative paths.
Route events monitored using Router.events observable. Events include: NavigationStart, NavigationEnd, NavigationError, etc. Used for loading indicators, analytics, navigation tracking. Subscribe in component/service.
Best practices: module-based routing, lazy loading, proper guard implementation, consistent naming, error handling, loading indicators, proper parameter handling. Consider security, performance, user experience.
Matrix parameters are URL segments with key-value pairs. Format: path;key=value. Alternative to query parameters. Accessed through paramMap. Useful for state preservation, filtering.
Route caching through RouteReuseStrategy. Store component state, reuse on navigation. Consider memory usage, state management. Useful for performance optimization, state preservation.
Path matching strategies control route matching behavior. Options: prefix (default, matches start), full (exact match). Configure in route definition. Affects route resolution, order importance.
Navigation failures handled through Router.events or navigation promise rejection. Implement error handling, user feedback. Consider redirection, retry logic. Important for robust navigation.
Lazy loading implemented using loadChildren syntax in route configuration: path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule). Improves initial load time by loading modules on demand.
404 routes configured using wildcard path '**' as last route in configuration. Redirects to specific component/path when no other routes match. Important for user experience and error handling.
RouteReuseStrategy controls component reuse during navigation. Custom implementation can define when to store/reuse components. Improves performance by avoiding recreation. Configure in providers array.
Auxiliary routes (named router outlets) allow multiple independent routes. Use named router-outlet. Enable side-by-side views, independent navigation. Configured with outlet property in route definition.
Named outlets allow multiple router-outlets with unique names. Configure routes with outlet property. Enable complex layouts, independent navigation flows. Useful for master-detail views, sidebars.
Router state contains current route tree information. Accessed using Router.routerState or ActivatedRoute. Provides information about active routes, parameters, data. Useful for complex navigation scenarios.
CanDeactivate prevents leaving route without confirmation. Common for forms, unsaved changes. Returns boolean/Promise/Observable. Implements confirmation dialogs, state checks. Important for data loss prevention.
Role-based routing uses guards checking user roles/permissions. Combine with authentication guard, role service. Return boolean/UrlTree for access control. Important for security, user experience.
Query parameters preserved using queryParamsHandling option in navigation methods/routerLink. Values: 'merge' (combine), 'preserve' (keep current). Important for maintaining state during navigation.
Route data configured using data property in route definition. Static data accessed via ActivatedRoute.data observable. Useful for titles, metadata, configuration. Available in components and guards.
Breadcrumbs implemented using router state/events. Track active route path, extract route data. Consider nested routes, dynamic segments. Update on navigation events. Important for navigation UX.
Route transitions implemented using Angular animations. Trigger on router-outlet, use route data. Consider enter/leave states, timing. Enhance user experience through smooth transitions.
routerLinkActive adds class when route active. Configure with exact match option. Useful for navigation highlighting, active state styling. Supports multiple classes, custom logic.
