Angular Router Skill

Rules

Router Configuration

• Use provideRouter(routes) in app.config.ts for standalone applications
• Define routes in a separate routes.ts file
• Use pathMatch: 'full' for empty path redirects
• Include wildcard route (**) as the LAST route for 404 handling

Lazy Loading

• Use loadChildren for lazy loading feature routes
• Use loadComponent for lazy loading standalone components
• Do NOT eagerly import feature modules in route configuration

Route Guards

• Use functional guards with inject() for dependency injection
• Return boolean or UrlTree from guards
• Use router.createUrlTree(['/path']) for guard redirects
• Do NOT use class-based guards (CanActivate, CanDeactivate interfaces)

Route Parameters

• Use toSignal(route.params, { initialValue }) to access route parameters
• Use toSignal(route.queryParams, { initialValue }) to access query parameters
• Provide initialValue when converting route observables to signals
• Do NOT manually subscribe to route.params or route.queryParams

Navigation

• Use router.navigate(['/path']) for programmatic navigation
• Use [routerLink]="['/path']" for template navigation
• Do NOT manipulate URLs directly via window.location

---

Context

When to Use This Skill

Activate this skill when you need to:

• Configure application routes
• Implement route guards (CanActivate, CanDeactivate, Resolve)
• Set up lazy loading for feature modules
• Handle route parameters and query parameters
• Implement nested and child routes
• Create navigation menus and breadcrumbs
• Handle route transitions and animations
• Implement route redirects and wildcards
• Work with router events and navigation lifecycle

Basic Setup

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent }
];

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

Lazy Loading

// Feature module lazy loading
export const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes')
      .then(m => m.ADMIN_ROUTES)
  },
  {
    path: 'workspace',
    loadComponent: () => import('./workspace/workspace.component')
      .then(m => m.WorkspaceComponent)
  }
];

Route Guards

// Auth guard
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard = () => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isAuthenticated()) {
    return true;
  }

  return router.createUrlTree(['/login']);
};

// Apply guard
{
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [authGuard]
}

Route Parameters

// Route with parameter
{ path: 'user/:id', component: UserDetailComponent }

// Access in component
export class UserDetailComponent {
  private route = inject(ActivatedRoute);

  userId = toSignal(
    this.route.params.pipe(map(params => params['id'])),
    { initialValue: null }
  );
}

References

• Angular Router Documentation
• Router API Reference