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