Angular Routing

Angular Routing is a community skill for implementing navigation in Angular applications, covering route configuration, lazy loading, guards, resolvers, nested routes, and programmatic navigation patterns.

What Is This?

Overview

Angular Routing provides patterns for managing navigation and URL state in Angular applications. It covers route configuration with path matching, parameter binding, and wildcard handling for defining application URL structure, lazy loading with loadComponent and loadChildren for route-level code splitting, route guards using canActivate, canDeactivate, and canMatch for access control and navigation protection, resolvers that prefetch data before component initialization for ready-on-render experiences, and nested routes with router outlets for parent-child layout composition. The skill enables developers to build navigable applications with protected routes and optimized loading.

Who Should Use This

This skill serves Angular developers configuring application routing with lazy loading and guards, teams implementing role-based access control through route protection, and engineers building multi-layout applications with nested router outlets.

Why Use It?

Problems It Solves

Eagerly loaded routes include all feature code in the initial bundle increasing load time. Unprotected routes allow unauthorized access to restricted content. Components that fetch data after mounting show loading spinners on every navigation. Complex layouts with multiple content areas need nested outlets for independent routing.

Core Highlights

Lazy loading defers route code until navigation reduces initial bundle size. Functional guards use inject() for clean access control logic. Resolvers prefetch data making components render with content immediately. Named outlets enable independent routing for side panels and dialogs.

How to Use It?

Basic Usage

import { Routes } from
  '@angular/router';

export const APP_ROUTES:
  Routes = [
  {
    path: '',
    loadComponent: () => import(
      './home/home.component')
      .then(
        (m) => m.HomeComponent),
  },
  {
    path: 'dashboard',
    canActivate: [authGuard],
    loadComponent: () => import(
      './dashboard/'
      + 'dashboard.component')
      .then(
        (m) =>
          m.DashboardComponent),
  },
  {
    path: 'admin',
    canActivate: [
      authGuard, roleGuard],
    loadChildren: () => import(
      './admin/admin.routes')
      .then(
        (m) => m.ADMIN_ROUTES),
  },
  {
    path: '**',
    loadComponent: () => import(
      './not-found/'
      + 'not-found.component')
      .then(
        (m) =>
          m.NotFoundComponent),
  },
];

Real-World Examples

import { inject } from
  '@angular/core';
import { CanActivateFn,
  Router, ResolveFn } from
  '@angular/router';

// Functional auth guard
export const authGuard:
  CanActivateFn = () => {
  const auth =
    inject(AuthService);
  const router =
    inject(Router);

  if (auth.isAuthenticated()) {
    return true;
  }
  return router.createUrlTree(
    ['/login']);
};

// Role guard
export const roleGuard:
  CanActivateFn = (route) => {
  const auth =
    inject(AuthService);
  const required =
    route.data['role'];
  return auth.hasRole(required);
};

// Data resolver
export const userResolver:
  ResolveFn<User> = (route) => {
  const api =
    inject(UserService);
  return api.getById(
    route.params['id']);
};

// Route with resolver
// {
//   path: 'users/:id',
//   resolve: {
//     user: userResolver },
//   loadComponent: ...
// }

Advanced Tips

Use canMatch guards for A/B testing routes where different components serve the same path based on conditions. Implement route animations with Angular Animations triggered on router outlet activate events. Use router events observable to build loading indicators that show during navigation transitions.

When to Use It?

Use Cases

Build an application with role-based route protection using functional guards. Implement lazy-loaded feature routes that reduce initial bundle size by over fifty percent. Create a detail page with a resolver that prefetches data before component rendering.

Related Topics

Angular Router, lazy loading, route guards, resolvers, and nested routing.

Important Notes

Requirements

Angular 15 or later for functional guards and resolvers. provideRouter in application configuration. Route module or standalone component structure for lazy loading.

Usage Recommendations

Do: use functional guards over class-based guards for simpler, tree-shakable route protection. Lazy load feature routes to keep the main bundle small. Return UrlTree from guards for redirect navigation rather than manual router calls.

Don't: put heavy data fetching in canActivate guards which should only check permissions. Use resolvers for data that loads quickly; slow resolvers block navigation causing perceived lag. Create deeply nested route configurations that make URL patterns difficult to understand.

Limitations

Resolvers block navigation until data loads which can feel slow for large payloads. Route guard execution order follows array order which may cause unexpected behavior. Named outlets add URL complexity and are difficult to share as deep links. Wildcard routes match all unmatched paths requiring careful route ordering to prevent catching valid paths.